I had used the plugin in the past to create an image swiper of Instagram images for one of my client. But while working on the rebuilding of the Valuebound website, I faced a different situation; use the swiper in a views display.
Now, swiper js requires the HTML structure to be very specific. Firstly, it needs a
swiper-container to contain the whole swiper sturcture and a specific require class
swiper-wrapper to wrap the swiper items.
In my previous case, I had created a block where I had full control over the HTML stucture of the block. But here I was dealing with views. Here, I have to add a container class which will be used to initialize the swiper and a required wrapper class for the slides.
Twig comes to the rescue
Twig is the powerful templating engine for Drupal 8. Twig have a naming convention or pattern for views.
Based on this, I created a twig file named
If you dig the code for
views-view-unformatted.html.twig, you can see it renders each row while running in a loop.
All, I had to do is add a
swiper-container class followed by a
swiper-wrapper class outside the for loop. Also, an additional
swiper-slides along with the
If you notice, on top I have attached a library where the JS to initialize the swiper will be written, to initialize and keep the swiperjs plugin to load only for the pages where it is required.