I am using chocolat.js with swiper.
<div class="swiper-container">
<div class="swiper-wrapper chocolat-parent">
<div class="swiper-slide">
<a href="..." class="chocolat-image">
<img src="..." alt="swiper image">
</a>
</div>
<div class="swiper-slide">
<a href="..." class="chocolat-image">
<img src="..." alt="swiper image">
</a>
</div>
</div>
</div>
Something like this. The issue is some images open in a new tab instead of chocolat popup. I was testing that behaviour for some time and I realised the problem is "loop: true" property in swiper object. Duplicated slides (swiper's loop works like this - duplicate slides) seems to not work properly and just open in a new tab. I tried to reinitiate chocolat after event "changeSlide" but it didn't help. Any ideas?
JS:
$('.chocolat-parent').Chocolat().data('chocolat');
new Swiper ('.swiper-container', {
loop: true,
speed: 450,
autoplay: {
delay: 3000,
},
navigation: {
nextEl: '.swiper-button-right',
prevEl: '.swiper-button-left',
},
});
Simple initiation. nothing more
Related
At first try to use Swiper JS.
I'd connected it from CDN. Using it in my Joomla 4 template, this template using Twitter Bootstrap 5.
This is link: https://club.artcolorit.com/
I need create the same, like in Figma layout: Screenshot
Some problems:
I see navigation, but it didn't working.
I didn't see pagination
It need display 3 slide on the screen, but I see only one.
Javascript
<script>
let swiper = new Swiper(".swiper", {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
HTML
<div id="games" class="row">
<div class="col-12">
<h2 class="zag-h2">Наши игры</h2>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1<img src="images/game.jpg" alt="" /></div>
<div class="swiper-slide">Slide 2<img src="images/game.jpg" alt="" /></div>
<div class="swiper-slide">Slide 3<img src="images/game.jpg" alt="" /></div>
</div>
<div class="swiper-pagination"> </div>
<div class="swiper-button-prev"> </div>
<div class="swiper-button-next"> </div>
</div>
</div>
</div>
Help please with these problems. Thanks
Error was in my code.
Script must be in the code below than HTML-elements of the slider. I didn't know about it.
Issue:
We are having accessibility issues on the swiper slider when pressing the enter button on the thumbnail which doesn't bring the selected image to the main image area.
is there any way if we can do so pressing the enter button changes the main image of the slider?
Scenario:
We have a swiper JS - slider (https://swiperjs.com/) set up on our website the slider works perfectly with thumbnails. that means clicking on the thumbnail, shows the specific image in the main image area.
But for the accessibility, I am trying to add "tabindex='0'" and "role='button'" so I can focus the thumbnails by pressing tabs (and this works) but pressing (enter) button doesn't bring up the selected image on the main image area.
Please see the codepen link below with the code example and you can see that you can tab through the thumbnails but hitting enter on the thumbnail doesn't do anything:
Code with the demo link:
https://codepen.io/asifkhanlush/pen/oNjvVpG?editors=1111
Code:
HTML:
<body>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div tabindex="0" role="button" class="swiper-slide">
<div class="swiper-slide-container">Slide 1</div>
</div>
<div tabindex="0" role="button" class="swiper-slide">
<div class="swiper-slide-container">Slide 2</div>
</div>
....
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div tabindex="0" role="button" class="swiper-slide">
<div class="swiper-slide-container" >Slide 1</div>
</div>
<div class="swiper-slide" tabindex="0" role="button">
<div class="swiper-slide-container">Slide 2</div>
</div>
...
</div>
</div>
JS:
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
loopedSlides: 4
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true,
loop: true,
loopedSlides: 4
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
This is a bug/missing feature in Swiper (https://github.com/nolimits4web/swiper/issues/4324), but I found a workaround.
Basically, add data-slide-index to all thumbs and add a keydown listener to the thumbnail elements:
galleryThumbs.$el.on("keydown", (e) => {
if (e.keyCode !== 13 && e.keyCode !== 32) return;
var slideIndex = e.target.dataset.slideIndex;
if (!slideIndex) return;
galleryThumbs.slideTo(slideIndex);
galleryTop.slideTo(slideIndex);
});
Here's the full code with a demo: https://codesandbox.io/s/swiper-thumbs-gallery-forked-2d1up?file=/index.html.
I am using the Slider from Ratchet css, which as far as I know does nothing as far as auto scrolling goes.
Here is the code:
<div class="slider" id="mySlider">
<div class="slide-group">
<div class="slide">
<img src="/assets/img/slide-1.jpg">
<span class="slide-text">
<span class="icon icon-left-nav"></span>
Slide me
</span>
</div>
<div class="slide">
<img src="/assets/img/slide-2.jpg">
</div>
<div class="slide">
<img src="/assets/img/slide-3.jpg">
</div>
</div>
</div>
What I need to do is either with js or css or both have the images scrolling every few seconds.
How can I do this?
Looking into the sliders.js it is based off
https://github.com/thebird/Swipe
So a function like this could work, it might need some tweaking.
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
I'm using bxSlider to run a slideshow. I needed to use external captions, which I did by broadly following this answer.
This is working well for the caption itself, but I also want to change the URL that each caption's link goes to.
I've made an attempt at hacking this together myself using the caption code as inspiration, and various answers from this thread, but I've hit a wall of not knowing what I'm doing.
Code is below, does anybody have any suggestions? I'm sure it's super basic but I just don't JavaScript, which means I'm missing lots of core concepts that would allow me to work this out myself.
<div class="bxslider">
<div class="slide id-0">
<img src="/images/index-01.jpg" title="Caption 1" />
</div>
<div class="slide id-1">
<img src="/images/index-02.jpg" title="Caption number two" />
</div>
<div class="slide id-2">
<img src="/images/index-03.jpg" title="Third caption" />
</div>
</div>
<div class="caption-1">
<div class="cap-cont">
<div class="cap-text"><div class="slider-txt"></div></div>
<a class="box-link">Find out more</a>
</div>
</div>
<script type="text/javascript">
$('.bxslider').bxSlider({
auto: true,
speed: 2000,
pause: 6000,
pager: false,
controls: true,
responsive:true,
onSliderLoad: function(currentIndex) {
var slideNum = '.id-' + currentIndex;
$(".slider-txt").html($('.bxslider .slide' + slideNum).find("img").attr("title"));
$(".link-txt").html($('.bxslider .slide' + slideNum).find("a").attr("href"));
},
onSlideAfter: function($slideElement, oldIndex, newIndex) {
$(".slider-txt").html($slideElement.find("img").attr("title"));
$(".link-txt").html($slideElement.find("a").attr("href"));
$("a.link-txt").attr("href", "http://cupcream.com");
}
});
</script>
I have a carousel slider,
when I click on a thumb an image needs to be loaded in the large banner.
How can I do this?
It needs to be smooth, it shows a large image, when clicking on a thumb that thumb needs to fade-in over the existing image. But first I need to get it working thow.
Example here
New other example is here!
<div class="big">
<img src="http://placehold.it/476x300&text=first" />
<img src="http://placehold.it/476x300&text=sec" />
<img src="http://placehold.it/476x300&text=third" />
<img src="http://placehold.it/476x300&text=four" />
<img src="http://placehold.it/476x300&text=five" />
</div>
<div class="owl-carousel small">
<div class="item">
<img src="http://placehold.it/238x150&text=first" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=sec" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=third" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=four" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=five" />
</div>
</div>
script:
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 2,
nav: false
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: false,
loop: false,
margin: 20
}
}
})
})
You need to attach an event handler to each image,
I see you are loading jQuery which makes this nice and easy
$(function(){
$(".big img:eq(0)").nextAll().hide();
$(".es-slides .es-slide-inner img").click(function(e){
var index = $(this).index();
$(".big img").eq(index).show().siblings().hide();
});
$('#basic_slider img').each(function(i,image){
$(image).on('click', function(){
$('.big').html('<img src=\''+ image.src + '\'/>');
});
});
});
We are using the jQuery each method to loop through each image in the carousel, then update the html inside the with an image tag that has the correct src for the image.
Alternatively you could show/hide the images in the .big container like your html already shows. This will probably work better for fading the images in and out as you wish.
Fiddle