CODEWITHSUNDEEP
javascriptjquerysliderslideswiper.js
Ferhat
Ferhat

Reputation: 33

How to Swiper Slider Mouse Hover Pagination

var sliderThumbs = new Swiper('.slider .slider-thumbs', {
            slidesPerView: 'auto',
            });
          var slidercontent = new Swiper('.slider .slider-content', {
            disableOnInteraction: false,
            thumbs: {
              swiper: sliderThumbs,
            },
          });

slide change to thumbs hover

not working the following code

$('.swiper-slide.thumb-slide').hover(function() {
      $( this ).trigger( "click" );
   });

i do sorry for my bad english

Upvotes: 3

Views: 10047

Answers (2)

sawacrow
sawacrow

Reputation: 331

You can use below script btw, its made by only CSS. Also, pagination is triggered when you hover over the relevant area on the slider.

https://codepen.io/sawacrow/details/YzjXwzy

CSS

        .swiper-pagination-hover-wrap {
      .swiper-wrapper {
        padding-bottom: 50px;
      }
      .swiper-pagination {
        //background-color: rgba(204, 16, 184, 0.45);
        z-index: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        bottom: 0;
        
        &-bullet {
          width: 100%;
          border-radius: 0px;
          position: relative;
          display: flex;
          flex-direction: column;
          height: 100%;
          background-color: transparent;
          
          &::before {
            position: absolute;
            bottom: 0;
            color: black;
            background-color: #000000;
            content: "";
            
            width: 100%;
            height: 10px;
          }
          
          &::after {
            //background-color: rgba(255, 0, 0, 0.49);
            content: "";
            //border-left: 1px solid red;
            width: fit-content;
            height: 100%;
            position: absolute;
            left: 0;
            width: 100%;
          }
        }
      }
    }

JS

   var swiper = new Swiper(".mySwiper", {
    spaceBetween: 30,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

document.querySelectorAll('.swiper-pagination-hover-wrap .swiper-pagination-bullet').forEach(el => el.addEventListener('mouseover', (event) => {
    el.click();
}));

HTML

            <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Swiper demo</title>
            <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
            />
        </head>
        <body>
        <!-- Swiper -->
        <div class="swiper mySwiper swiper-pagination-hover-wrap">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <h1>slider1</h1>
                </div>
                <div class="swiper-slide">
                    <h1>slider2</h1>
                </div>
                <div class="swiper-slide">
                    <h1>slider3</h1>
                </div>
                <div class="swiper-slide">
                    <h1>slider4</h1>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        </body>
        </html>

Upvotes: 0

user7290573
user7290573

Reputation: 1330

$( this ).trigger( "click" ) won't work because the thumbnail slides don't actually have click events bound to them. Instead, you can call the slideTo() method and use the thumbnail's index, like so:

$('.swiper-slide').on('mouseover', function() {
    slidercontent.slideTo($(this).index());
})

See the following:

Upvotes: 4

Related Questions