5678 Street, Dubai, UAE 00000
Mon-Fri, 9:00-17:00. Saturday-Sunday CLOSED
212 6788 78993, 212 3478 09088

# Swiper

For more details see Swiper Js documentation⟶

    <div class="swiper theme-slider" data-swiper='{"autoplay":true,"spaceBetween":30,"loop":true,"slidesPerView":1,"breakpoints":{"670":{"slidesPerView":2},"1200":{"slidesPerView":3}}}'>
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-1.jpg" alt="image" /></div>
                                        <div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-7.jpg" alt="image" /></div>
                                        <div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-3.jpg" alt="image" /></div>
                                        <div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-4.jpg" alt="image" /></div>
                                        <div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-5.jpg" alt="image" /></div>
                                        <div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-6.jpg" alt="image" /></div>
                                    </div>
                                    <div class="swiper-nav">
                                        <div class="swiper-button-prev"><span class="fas fa-chevron-left"></span></div>
                                        <div class="swiper-button-next"><span class="fas fa-chevron-right"></span></div>
                                    </div>
                                    </div>

##### Swiper with thumbnail

This can be simply done by using the attribute. For Swiper with thumbnail use `thumb` options in your pug/HTML. You can place thumbnail to a specific parent by providing `thumbOptions: '#parentID'` value in `thumb` options. Otherwise thumbnail will place after the `.swiper` element.

    <div class="swiper theme-slider" data-swiper='{"spaceBetween":5,"loop":true,"loopedSlides":5,"thumb":{"spaceBetween":5,"slidesPerView":5,"loop":true,"freeMode":true,"grabCursor":true,"loopedSlides":5,"centeredSlides":true,"slideToClickedSlide":true,"watchSlidesVisibility":true,"watchSlidesProgress":true},"slideToClickedSlide":true}'>
       <div class="swiper-wrapper">
         <div class="swiper-slide"><img class="img-fluid" src="../assets/img/interior-1.jpg" alt="image" /></div>
         <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/interior-4.jpg" alt="image" /></div>
         <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/interior-6.jpg" alt="image" /></div>
       </div>
       <div class="swiper-nav">
         <div class="swiper-button-prev"><span class="fas fa-chevron-left"></span></div>
         <div class="swiper-button-next"><span class="fas fa-chevron-right"></span></div>
       </div>
     </div>

##### Swiper without thumbnail

    <div class="swiper theme-slider" data-swiper='{"autoplay":true,"spaceBetween":5,"loop":true,"loopedSlides":5,"slideToClickedSlide":true}'>
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img class="img-fluid" src="../assets/img/gallery/06-f.jpg" alt="image" /></div>
        <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/gallery/07-f.jpg" alt="image" /></div>
        <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/gallery/09-f.jpg" alt="image" /></div>
        <div class="swiper-slide"> <img class="img-fluid" src="../assets/img/gallery/10-f.jpg" alt="image" /></div>
      </div>
      <div class="swiper-nav">
        <div class="swiper-button-prev"><span class="fas fa-chevron-left"></span></div>
        <div class="swiper-button-next"><span class="fas fa-chevron-right"> </span></div>
      </div>
    </div>

##### JavaScript

    <script src="vendors/swiper/swiper-bundle.min.js"></script>

##### CSS

    <link href="vendors/swiper/swiper-bundle.min.css" rel="stylesheet">

#### Sign up for email alerts

Stay current with our latest insights

- Contact Us
- FAQ
- Privacy Policy
- Terms of Use
- Global Office
- Local Office

- ##### Linkedin

- ##### Twitter

- ##### Facebook

- ##### Google+