Message Boards

Back

Carousel. Speed of transition

Threads [ Previous | Next ]
RSS (Opens New Window)
Toggle
Carousel. Speed of transition
Answer
1/28/21 2:19 AM
Hello, 

We are using the theme http://lr7.themeray.com/web/unify-real-estate/home. Versión 2.1
We want to change the speed of transition of the carousel we are using in the home.
 
This is the code we have implemented:
<div id="carouselHome1" class="js-carousel" 
     data-auto-height="auto"                
     data-autoplay="true" 
     data-speed="6000" 
     data-infinite="true" 
     data-fade="true" 
     data-nav-for="#carouselHome2">
 
We have found the option data-speed which establishes the time that the image is displayed, but we can’t find the property to personalize the speed of transition of the images within the carousel.
 
Thank you.

Kind regards,
Laura
0 (0 Votes)
Flag

RE: Carousel. Speed of transition
Answer
1/31/21 10:10 PM as a reply to Alejandra Sanchez Maganto.
Hello,

Sorry for the delay, this is an example of the image carousel : 

12345678910111213141516171819202122232425262728293031323334353637383940
<!-- Products - Carousel Image -->
              <div class="js-carousel"
                data-infinite="true"
        data-autoplay="true"
        data-speed="6000"
                   data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-30 g-height-30 g-color-main g-bg-primary-opacity-0_4 g-bg-primary--hover g-color-white"
                   data-arrow-left-classes="fa fa-angle-left g-right-30 g-brd-right g-brd-white-opacity-0_1"
                   data-arrow-right-classes="fa fa-angle-right g-right-0">
                <div class="js-slide g-pos-rel">
                  <a class="js-fancybox d-block u-icon-v3 g-width-30 g-height-30 g-color-main g-bg-primary-opacity-0_6 g-bg-primary--hover g-color-white g-font-size-14 g-pos-abs g-bottom-0 g-right-65" href="javascript:;"
                     data-fancybox="lightbox-gallery--01"
                     data-src="img1.jpg"
                     data-speed="350"
                     data-caption="Lightbox Gallery">
                    <i class="icon-size-fullscreen"></i>
                  </a>
                  <img class="img-fluid" src="img1.jpg" alt="Image Description">
                </div>
                <div class="js-slide g-pos-rel">
                  <a class="js-fancybox d-block u-icon-v3 g-width-30 g-height-30 g-color-main g-bg-primary-opacity-0_6 g-bg-primary--hover g-color-white g-font-size-14 g-pos-abs g-bottom-0 g-right-65" href="javascript:;"
                     data-fancybox="lightbox-gallery--01"
                     data-src="img2.jpg"
                     data-speed="350"
                     data-caption="Lightbox Gallery">
                    <i class="icon-size-fullscreen"></i>
                  </a>
                  <img class="img-fluid" src="img2.jpg" alt="Image Description">
                </div>
                <div class="js-slide g-pos-rel">
                  <a class="js-fancybox d-block u-icon-v3 g-width-30 g-height-30 g-color-main g-bg-primary-opacity-0_6 g-bg-primary--hover g-color-white g-font-size-14 g-pos-abs g-bottom-0 g-right-65" href="javascript:;"
                     data-fancybox="lightbox-gallery--01"
                     data-src="img3.jpg"
                     data-speed="350"
                     data-caption="Lightbox Gallery">
                    <i class="icon-size-fullscreen"></i>
                  </a>
                  <img class="img-fluid" src="img3.jpg" alt="Image Description">
                </div>
              </div>
              <!-- Products - Carousel Image -->


Regards,
Sabri BEN SALEM
0 (0 Votes)
Flag

RE: Carousel. Speed of transition
Answer
2/3/21 1:45 AM as a reply to sabri ben salem.
Hello,

Ok, thank you for sending us an example. We have tried but we have the same problem: We can personalize the time that the image stays but not the time of the transition itself (between one image and the following). We think the default speed of transition is too quick.
 
In the example we see that there are the following two properties and when we change that in the code you have sent us, we don’t see any difference in the speed of transition of the images.
   1)In the <div> -> data-speed="6000"
   2)In the <a>    -> data-speed="350"           

We have seen that the library "slick-carousel.js" has two properties: speed and autodisplaySpeed


Nevertheless in the theme library (hs.carousel.js) we think that only 'autoPlaySpeed' is used. And we need to use the property 'speed' (the slide animation speed).
In the library, you take the property 'data-speed' (setSpeed = $this.data('speed')) and you set the property 'autoPlaySpeed'.
 
So, how could we personalize the code in order to change the speed/velocity of transition (or the slide animation speed) between one image and the other?

Thank you.

Kind regards,
Laura
0 (0 Votes)
Flag