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'
}
})
});

Slick slider - Adding active class to first < a > in currently open foundation tab

Trying to add an active class to the first a tag within a selected tab.
My code is adding the active class to the very first element in slide one and doing exactly what I want within slider one but then when I change tabs it is still adding the active class to the navigation on the first slider not slider 2 that is in view.
JS
$(document).ready(function(){
var $slideshow = $(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
$('.links').on('click', 'a', function( e ) {
var slideIndex = $(this).closest('li').index();
$slideshow.slick( 'slickGoTo', parseInt( slideIndex ) );
$('.links li a').removeClass('slick-current');
$(this).addClass('slick-current');
e.preventDefault();
});
//Re draw slider when data tabs change
$('[data-tabs]').on('change.zf.tabs', function() {
$('.slider').slick("setPosition", 0);
$('.slider').slick("slickGoTo", 0);
});
$('.slider').on('afterChange', function(event,slick,i){
$('.links li a').removeClass('slick-current');
$('.links li a').eq(i).addClass('slick-current');
});
// document ready
$('.links li a').eq(0).addClass('slick-current');
});
HTML
<div class="sidebar-nav">
<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab2</li>
</ul>
</div>
<div class="tabs-panel is-active" id="panel1v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider1">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>
<div class="tabs-panel" id="panel2v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider2">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>

Your problem is that the listeners are set for both sliders. You have to create each slider individually. I'd say the simplest solution is to create a jQuery function that handles all that.
So with your HTML, the code necessary would about look like so (it's not perfectly optimized but easy to read)
// create a new jQuery function
$.fn.extend({
createTabSlider: function() {
var $self = $(this)
// $self is the tab, to get an element you DONT use $('something')
// you use $self.find("something")
var $slideshow = $self.find(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
})
$self.find(".links").on("click", "a", function(e) {
var slideIndex = $(this).closest("li").index()
$slideshow.slick("slickGoTo", slideIndex)
})
$slideshow.on("afterChange", function(event, slick, i) {
$self.find(".links li a").removeClass("slick-current")
$self.find(".links li a").eq(i).addClass("slick-current")
})
$self.find(".links li a").eq(0).addClass("slick-current")
}
})
// create a slider for each tab
$("#panel1v").createTabSlider()
$("#panel2v").createTabSlider()

You can try using on function in id rather than class and remove and add class referring from parent element i.e. panel2v or panel1v. and dont forget to use on function for both slider. Hope it works.

Slick can't handle multiple sliders being instantiated together. You need to instantiate the sliders individually using ids.
var $slideshow1 = $("#slider1").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
var $slideshow2 = $("#slider2").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
You should still be able to hook in your events to both at once using the classes though.

Sync slider with slick ignore specific slide in syncing

I have 2 sync slider in the top slider I need to add at a specific place informations which is not in the bottom slider. How could I still keep this in sync correctly?
HTML:
<div class="example example1">
<div class="slider slider-for">
<div>1</div>
<div>2</div>
<div>3</div>
<div>
Only exist here
</div>
<div>4</div>
</div>
<div class="slider slider-nav">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
<div><p>4</p></div>
</div>
</div>
Javascript:
jQuery('.example1 .slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: false,
asNavFor: '.example1 .slider-nav',
dots: false,
arrows:true,
appendArrows: '.pr_images',
prevArrow:'<i class="fa fa-angle-left slick-prev"></i>',
nextArrow:'<i class="fa fa-angle-right slick-next"></i>'
});
jQuery('.example1 .slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.example1 .slider-for',
dots: false,
arrows:false,
centerMode: false,
focusOnSelect: true
});
Fiddle: http://jsfiddle.net/45w9k4qb/

Have you tried the option
slide: '.slide'
As shown here:
https://codepen.io/quarkus/pen/JKPgza
So If you give all the slide you want visible the class .slide it might work?

jQuery replace div with another div function

I have this HTML block and I need a jQuery function (like replaceWith()) to find the next instance of the <div class="tagstrap"> out of the four present and change it when my javascript method is called. I want to do this using the jQuery bxslider onSlideAfter() method. Could someone help me with the javascript function?
HTML
<div class="tagstrap">
<h2><p>We provide business and personal insurance to suit your individual needs</p></h2>
<a class="read-more" href='products/'>Read More</a>
</div>
<div class="tagstrap">
<h2><p>Smallholders Insurance</p></h2>
<a class="read-more" href='products/smallholders.php'>Read More</a>
</div>
<div class="tagstrap">
<h2><p>Single tractor</p></h2>
<a class="read-more" href='products/single-tractor.php'>Read More</a>
</div>
<div class="tagstrap">
<h2><p>Property Owners</p></h2>
<a class="read-more" href='products/property-owners.php'>Read More</a>
</div>
Javascript (for bxSlider)
$('.bxslider').bxSlider({
pager: true,
auto: true,
useCSS: false
onSlideAfter: function($slideElement, oldIndex, newIndex){//my method here}
});

$('.bxslider').bxSlider({
pager: true,
auto: true,
useCSS: false
onSlideAfter: function(){
$('.tagstrap').each(function(){
$(this).html("Your replacement code goes here...");
});
}
});