Develop Reference

How to hide current slide in the slick slider nav?

I'm using the slick slider nav, but I want to hide the current slide in the nav slider.
Currently you can see the current slide image at the top, but you can also see that same image at the start of the nav slider. I want to hide this image though, so that the slider nav will only show the next images, not the current.
Any idea if this is possible?
Codepen for reference.
<div class="container">
<div class="row">
<div class="col">
<div class="main-slider">
<img src="https://images.freeimages.com/images/large-previews/76e/abstract-1-1174741.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/aaf/abstract-paper-free-photo-1175904.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/4d6/chugh-1171409.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/655/glass-abstract-1501217.jpg" alt="">
</div>
<div class="nav-slider">
<img src="https://images.freeimages.com/images/large-previews/76e/abstract-1-1174741.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/aaf/abstract-paper-free-photo-1175904.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/4d6/chugh-1171409.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/655/glass-abstract-1501217.jpg" alt="">
</div>
</div>
</div>
</div>
// Gallery - Synced sliders
$(".main-slider").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: ".nav-slider",
});
// Gallery - Nav slider
$(".nav-slider").slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: ".main-slider",
dots: false,
arrows: true,
focusOnSelect: true,
});

Slick adds the slick-current class to the current slide.
So just add this to your CSS style:
.nav-slider .slick-current {
display: none;
}

Glider.js not working. My carousel, using glider JS is not working/

I tried to create a carousel using glider.js from https://nickpiscitelli.github.io/Glider.js/. I followed all the steps, yet it is not working. Can you help me, please? I click the arrow and it doesn't move.
<div class="glider-contain">
<button class="glider-prev">
<i class="fa fa-chevron-left"></i>
</button>
<div class="glider">
<div> <img src="./img/barcelona-img.png" alt="Barcelona"></div>
<div> <img src="./img/madrid.png" alt="Madrid"></div>
<div> <img src="./img/paris.png" alt="Paris"></div>
<div> <img src="./img/paris.png" alt="Paris"></div>
<div> <img src="./img/paris.png" alt="Paris"></div>
</div>
<button class="glider-next">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
<script src="./glider.min.js"></script>
<script src="../index.js "></script>
<script>
new Glider(document.querySelector('.glider'), {
slidesToShow: 3,
dragable: true,
arrows: {
prev: '.glider.prev',
next: '.glider-next'
}
})
</script>

Problems in your code:
the class for the arrow is incorrect, .glider.prev instead of
.glider-prev;
the dragable parameter is invalid, you need draggable;
extra closing div </div> at the end of markup, not critical.
For greater reliability, you can wrap the initialization in window.addEventListener('load', function() { ... }), although this is not necessary in your case, since everything is ready before initialization. Although the author prefers to wrap https://nickpiscitelli.github.io/Glider.js/ (Usage tab).
Here is an example of a minimal working glider configuration:
new Glider(document.querySelector('.glider'), {
slidesToShow: 2,
draggable: true,
arrows: {
prev: '.glider-prev',
next: '.glider-next'
},
dots: '.dots'
})
.wrapperForDemo {
width: 500px;
max-width: 80%;
margin: 0 auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js#1/glider.min.css">
<script src="https://cdn.jsdelivr.net/npm/glider-js#1/glider.min.js"></script>
<div class="wrapperForDemo">
<div class="glider-contain">
<div class="glider">
<div><img src="https://placeimg.com/300/200/arch" alt="Barcelona"></div>
<div><img src="https://placeimg.com/300/200/animals" alt="Barcelona"></div>
<div><img src="https://placeimg.com/300/200/tech" alt="Barcelona"></div>
<div><img src="https://placeimg.com/300/200/people" alt="Barcelona"></div>
</div>
<button role="button" aria-label="Previous" class="glider-prev">«</button>
<button role="button" aria-label="Next" class="glider-next">»</button>
<div role="tablist" class="dots"></div>
</div>
</div>

H , i try loading the script files before the html body
also call Glide after window is completely loaded
window.addEventListener('load', function(){
new Glider(document.querySelector('.glider'), {
slidesToShow: 3,
draggable: true,
arrows: {
prev: '.glider-prev',
next: '.glider-next'
}
})
});

Jquery not performing function properly after a previews function was called

Ok I'm a bit of a noob and not entirely sure how I should ask this question.
I will start by showing my code
HTML:
<div class="image-popup-container">
<button id="close"><i class="fa fa-times"></i></button>
<div id="closearea"></div>
<ul id="image-popup" class="image-popup">
<li class="product-image">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" />
</li>
<li class="product-image">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Image.png" alt="AlgaeCal Plus Main Product Image" />
</li>
<li class="product-video">
<iframe src="//fast.wistia.net/embed/iframe/w4ithbv9tz" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="360"></iframe>
</li>
</ul>
</div>
<div class="images">
<div id="image-preview" data-slick-index="0">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" />
</div>
<ul id="image-thumbs" class="thumbnails">
<li class="product-image-thumbnail">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" />
</li>
<li class="product-image-thumbnail">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Image.png" alt="AlgaeCal Plus Main Product Image" />
</li>
<li class="product-video-thumbnail">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Video-Thumbnail.jpg">
</li>
</ul>
</div>
jQuery
$(document).ready(function(){
// Load Carousel of thumbnails
$('.thumbnails').slick({
dots: false,
prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>',
nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>',
infinite: false,
speed: 300,
slidesToShow: 1,
centerMode: false,
variableWidth: true
});
// Grab Preview image
var imagePreview = $("#image-preview")
// Open product video thumbnail into iframe popup
// Listen for when product-video-thumbnail is clicked
$('.product-video-thumbnail').click(function(){
// Grab clicked product-video-thumbnail data-slick-index
var videoData = $(this).attr('data-slick-index');
imagePopupContainer.fadeIn();
$('.image-popup').slick({
centerMode: true,
prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>',
nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>',
centerPadding: '60px',
slidesToShow: 1,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
// Go to the correct slide
$('.image-popup').slick('slickGoTo', videoData);
});
// Listen for when product-image-thumbnail is clicked
$('.product-image-thumbnail').click(function(){
// Grab clicked product-image-thumbnail attributes and img attributes
var imageSrc = $(this).find('img').attr('src');
var imageAlt = $(this).find('img').attr('alt');
var imageData = $(this).attr('data-slick-index');
// Fade out the preview image
imagePreview.fadeOut( function(){
// Change preview image src to clicked thumbnail src
imagePreview.find('img').attr("src", imageSrc);
// Change preview image alt to clicked thumbnail alt
imagePreview.find('img').attr("alt", imageAlt);
// Update the slick-index for modal popup carousel
imagePreview.attr("data-slick-index", imageData);
});
// Fade the preview image back into view
imagePreview.fadeIn();
});
var imagePopupContainer = $(".image-popup-container")
imagePreview.click(function(){
imagePopupContainer.fadeIn();
$('.image-popup').slick({
centerMode: true,
prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>',
nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>',
centerPadding: '60px',
slidesToShow: 1,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
var index = $("#image-preview").attr("data-slick-index");
alert(index);
$('.image-popup').slick('slickGoTo', index);
})
$("#closearea").click(function(){
imagePopupContainer.fadeOut();
});
$("#close").click(function(){
imagePopupContainer.fadeOut();
});
});
You can see this currently in action here http://algaecal.cloudcreations.ca/
When you click on the Image preview it should pop an alert box howing the data-slick-index value, then open the fullsize preview-image. If you close the fullsize image and clicked a different thumbnail, that will update the preview image to the clicked thumbnail. Then if you click on the updated preview image it should show an alert box and then the updated preview image, however it is showing the previous preview image and no alert box.
I have no idea why this is happening. Its like after the first jquery function is performed the DOM is updated and the next jquery function performed does not grab the correct `data-slick-index' from the DOM and does not do the alert.
I'm terribly sorry for this poorly worded question. I just do not have the knowledge to properly ask this question.
Any help would be greatly appreciated.

You have to do the fadein AFTER you set the picture.
Give that a try and let us know if it helped

iDangerous Swiper initialSlide setting

For the mobile version of our website we use the iDangerous Swiper (2.4.3) to display product images and for the desktop version we use a carousel.
The mobile version uses the same images and order as our dekstop version, because
both versions use the same database query.
/*
* Carrousel
*/
$q = "
SELECT
c.id,
CONCAT('" . Config::get(array("paths","uri-products")) . $product_id . "/',c.image_url) as image_url
FROM
product_carrousel c
WHERE
c.product_id = '" . $product_id . "'
ORDER BY
c.order ASC
";
$r["carrousel"] = $this->db->select($q);
What we want to accomplish: The mobile version we want to display an other start image. Is there a way for the iDangerous Swiper (2.4.3) to have a specific start slide or offset -1 slide (so it starts with the last image). This way i can upload the specific start image for mobile as last image, and have that one displayed first only on mobile.
HTML/PHP Mobile version:
<div class="swiper-container product-slider">
<div class="swiper-wrapper">
<?php foreach ($product['carrousel'] as $x => $item):?>
<div class="swiper-slide">
<figure class="swiper-slide-img">
<img src="<?php echo $item['image_url']; ?>" alt="<?php echo strip_tags($product['title']); ?>"/>
</figure>
</div>
<?php endforeach; ?>
</div>
HTML Output Mobile:
<div class="swiper-container product-slider done">
<div class="swiper-wrapper" style="width: 2484px; transform: translate3d(-414px, 0px, 0px); transition-duration: 0s; height: 229px;"><div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
</div>
Partial solution:
In idangerous.swiper.min.js i found the setting: initialSlide.
Changing that to -1 makes the slider start with the last slide in mobile.
I've added to ui.js the following:
initSliders: function() {
$('.swiper-container').each(function(){
var paginationContainer = '.' + $(this).next().attr('class');
if($(this).hasClass('product-slider')) {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: -1,
pagination: paginationContainer,
calculateHeight: true
});
} else {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: 0,
pagination: paginationContainer,
calculateHeight: true
});
}
$(this).addClass('done');
$(this).next().addClass('swiper-ready');
});
},
Problem: The last pagination (in this case the active one) doesnt get the active class. Only on swipe it shortly gets the active pagination class, and then immediatly switches to the current active one.
On load:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>
While dragging/swiping:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
</div>
After swipe:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>

Solution
initSliders: function() {
$('.swiper-container').each(function(){
var paginationContainer = '.' + $(this).next().attr('class');
if($(this).hasClass('product-slider')) {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: -1,
pagination: paginationContainer,
calculateHeight: true
});
$(this).next().find(".swiper-pagination-switch:last").addClass("swiper-visible-switch swiper-active-switch");
} else {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: 0,
pagination: paginationContainer,
calculateHeight: true
});
}
$(this).addClass('done');
$(this).next().addClass('swiper-ready');
});

Click on thumb shows large image

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