We Keep Coding

Slick slider not working when initialSlide is set

I can't figure out why the slides do not slide when I have an initialSlide set. I'm referring to the docs at https://kenwheeler.github.io/slick/, but couldn't figure out what the problem is.
$('.container').slick({
initialSlide: 4,
infinite: false,
slidesToShow: 3,
slidesToScroll: 1
})
* {
box-sizing: border-box;
}
.container {
width: 120px;
}
.slide {
border: 1px solid red;
width: 40px;
}
<link href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="container">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
</div>

You have set the initial slide to 4 (i.e. index 4 is slide #5) - this is the last slide in your carousel. The problem is that your carousel is showing 3 slides, so you want the initial slide to be #3 which has index: 2:
(total slides - slidesToShow) = 5-3 = 2
If you set initialSlide: 2 this will still show the last 3 slides but it also sets up the "previous" button to go to slide #2 which will trigger a scroll. (The Next button won't have any effect of course, because you are showing the last slide and have infinite:false)
Working Example:
$('.container').slick({
initialSlide: 2,
infinite: false,
slidesToShow: 3,
slidesToScroll: 1
})
* {
box-sizing: border-box;
}
.container {
width: 120px;
}
.slide {
border: 1px solid red;
width: 40px;
}
<link href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="container">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
</div>

it is to work
$('.container').slick({
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
initialSlide: 3
})
you have 5 slides, but the initial one you specified is 4, and at the same time show 3. but the initial 1 is slide 2, the Initial 4 is slide 5, but slidesToShow: 3. the slider doesn't have any spare slides to show
while I was writing the answer it is already given in the comments

Since 2014 initialSlide not working in responsive config, so can use
$('.selector').slick('slickGoTo', 5);

slick-slider with Corresponding Image Section

I've made a simple slider using Ken Wheeler's slick-slider (https://kenwheeler.github.io/slick/), and I've added an image display function that switches another image below the slider (not the actual slider image) to correspond with the slider. I'd like this for a product carousel that will have a banner image that corresponds with the product in the slick-slider. The below code is functional, but was wondering if there's a cleaner way achieve this. I got hung-up and perhaps long-winded when checking for the inactive slides, and hiding the corresponding images. Thanks.
$(document).ready(function () {
$('.my-slide-wrapper').slick({
dots: true,
infinite: true,
speed: 1,
slidesToShow: 1,
slidesToScroll: 1
});
$("button.slick-arrow").click(function () {
if ($("#slick-slide00").hasClass("slick-active") && (!$("#slick-slide01 #slick-slide02").hasClass("slick-active"))) {
$("#myImage00").addClass("im-showing"),
$("#myImage01").removeClass("im-showing"),
$("#myImage02").removeClass("im-showing");
}
else if ($("#slick-slide01").hasClass("slick-active") && (!$("#slick-slide02 #slick-slide00").hasClass("slick-active"))) {
$("#myImage01").addClass("im-showing"),
$("#myImage02").removeClass("im-showing"),
$("#myImage00").removeClass("im-showing");
}
else {
$("#myImage02").addClass("im-showing"),
$("#myImage01").removeClass("im-showing"),
$("#myImage00").removeClass("im-showing");
}
});
});
Working version on CodePen: https://codepen.io/jakeos/pen/povXPyd

You should check out "Slider Syncing" in the documentation. It does exactly that. In your case, you need to setup both as sliders and use your top slider as the navigation for the bottom one.
I changed your HTML a bit to make it easier to understand
Here's a working fiddle.
HTML
<!-- This is just a slider using Ken Wheeler's slick-slider (https://kenwheeler.github.io/slick/), and I've added an image display function that switches the image below (the slider) to correspond with the slider. It will ultimately be for a product carousel that will have a banner image that corresponds with the product in the slider. -->
<body>
<div class="my-slide-container">
<div id="top-slider" class="my-slide-wrapper">
<img class="slide slide00" src="https://dummyimage.com/300x180/ff0000/ffffff.jpg&text=Slide+1">
<img class="slide slide01" src="https://dummyimage.com/300x180/00ff00/000000.jpg&text=Slide+2">
<img class="slide slide02" src="https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Slide+3">
</div>
<div id="bottom-slider" class="my-slide-wrapper">
<img class="slide slide00" src="https://dummyimage.com/300x180/ff0000/ffffff.jpg&text=Image+1">
<img class="slide slide01" src="https://dummyimage.com/300x180/00ff00/000000.jpg&text=Image+2">
<img class="slide slide02" src="https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Image+3">
</div>
</div>
</body>
CSS
.my-slide-container {
margin: 30px;
}
.my-slide-wrapper,
.my-image-wrapper {
margin: 0 auto;
max-width: 300px;
}
img {
max-width: 300px;
width: 100%;
}
.slick-dots li {
margin: 0;
}
.slick-next::before,
.slick-prev::before {
color: #000;
opacity: 1;
}
.my-image {
visibility: hidden;
position: absolute;
}
#myImage00 {
visibility: visible;
}
.im-hiding {
visibility: hidden;
}
.im-showing {
visibility: visible;
}
JS
$(document).ready(function () {
$('#top-slider').slick({
asNavFor: '#bottom-slider',
dots: true,
infinite: true,
speed: 1,
slidesToShow: 1,
slidesToScroll: 1
});
$('#bottom-slider').slick({
arrows: false,
dots: false,
draggable: false,
infinite: true,
speed: 1,
slidesToShow: 1,
slidesToScroll: 1
});
});

how could you copy any src image from one side to another side droppable with method bind and url?

you can copy only one image to the droppable area with the bind method and url with javascript but you can not change any image,
i tried sourceImage = new Image() but the plugin only works with url
<div class="draggable">
<img src='team.jpg' class="resizable ui-resizable draggable" style="width:300px"/>
</div>
<div class="draggable">
<img src='foto11.jpg' class="resizable ui-resizable draggable" style="width:300px"/>
</div>
<div id="vanilla-demo" class='droppable' style="width:356px;height:286px;position:absolute;top:29.1em;left:73px;background-color: yellow">
</div>
<script>
$(".draggable").draggable({cursor:"grabbing",helper:"clone",opacity:0.8,grid:[20,20]});
$( ".droppable" ).droppable({
op: function(event,ui) {
vanilla.bind({
url: 'team.jpg',
orientation: 4
});
}
});
var el = document.getElementById('vanilla-demo');
var vanilla = new Croppie(el, {
viewport: { width: 300, height: 250 },
boundary: { width: 300, height: 250 },
showZoomer: true,
enableOrientation: false
});
vanilla.bind({
url: '',
orientation: 4
});
</script>
I hope the url shows the image when drope the image,

When you drag an item to a droppable, you can use the ui.draggable passed into drop.
drop( event, ui )
Triggered when an accepted draggable is dropped on the droppable (based on the tolerance option).
event
ui
draggable Type: jQuery A jQuery object representing the draggable element.
Consider the following code.
$(function() {
var el = $('#vanilla-demo');
var vanilla = new Croppie(el[0], {
viewport: {
width: 300,
height: 250
},
boundary: {
width: 300,
height: 250
},
showZoomer: true,
enableOrientation: false
});
vanilla.bind({
url: '',
orientation: 4
});
$(".draggable").draggable({
cursor: "grabbing",
helper: "clone",
opacity: 0.8,
grid: [20, 20],
zIndex: 1002
});
$(".droppable").droppable({
classes: {
"ui-droppable-hover": "ui-state-hover"
},
drop: function(event, ui) {
var newImage = ui.draggable;
vanilla.bind({
url: newImage.attr("src"),
orientation: 4
});
}
});
});
.droppable {
width: 356px;
height: 286px;
position: absolute;
top: 29.1em;
left: 73px;
background-color: #cccccc;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="draggable">
<img src='https://i.imgur.com/WDds7On.jpg' class="resizable ui-resizable draggable" style="width:300px" />
</div>
<div class="draggable">
<img src='https://i.imgur.com/p77MNQh.jpg' class="resizable ui-resizable draggable" style="width:300px" />
</div>
<div id="vanilla-demo" class='droppable'></div>
When the new item is dropped, the Binding is updated for Croppie.
Hope that helps.

How to recreate div

I have an html page contain a div called wowslider-container1. I want to recreate the elements inside the wowslider-container1 when the values of properties such as duration and delay change. If I create another slider, it will create multiple sliders. If I hide, both will hide. What can I do? I don't need multiple sliders.
Duration:<input type="number" id="txtDuration" />
Delay<input type="number" id="txtDelay" />
<button onclick="set()">Set </button>
<br/>
<br/>
<div>
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li>
<a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor: pointer">
<img id="wows1_0" class="imgMain" src="SBG_HomePg_ANA2019_1146x405V3.jpg" len="0" alt="Consign." />
</a>
</li>
</ul>
</div>
</div>
</div>
script
var delay_value=100;
var duration_value=20;
function set() {
var dur=document.getElementById("txtDuration").value;
var del=document.getElementById("txtDelay").value;
setDuration(del, dur);
}
function setDuration(delay,duration) {
delay_value=delay;
duration_value=duration;
jQuery("#wowslider-container1").wowSlider({
effect: "fade",
prev: "",
next: "",
duration: duration_value * 100,
delay: delay_value * 100,
width: 900, height: 640,
autoPlay: true,
autoPlayVideo: false,
playPause: true,
stopOnHover: false,
loop: false,
bullets: 0,
caption: false,
captionEffect: "parallax",
controls: true,
controlsThumb: false,
responsive: 1,
fullScreen: false,
gestures: 2,
onBeforeStep: 0,
images: 0
});
}
setDuration(20,100);

The API shows that options can only be set during slider initialization (and there's no destroy() event), so you'll have to remove the events / elements and restart the slider:
http://wowslider.com/help/wowslider-api-184.html
HTML:
Duration: <input type="number" id="txtDuration">
Delay: <input type="number" id="txtDelay">
<button onclick="set()">Set </button>
<br><br>
<div class="wow-slider-container">
<div class="wow-slider">
<div class="images">
<ul>
<li>
<a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor:pointer">
<img id="wows1_0" class="imgMain" src='SBG_HomePg_ANA2019_1146x405V3.jpg' len='0' alt="Consign.">
</a>
</li>
</ul>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
var wowSliderOptions = {
effect: 'fade',
prev: '',
next: '',
duration: 20,
delay: 100,
width: 900,
height: 640,
autoPlay: true,
autoPlayVideo: false,
playPause: true,
stopOnHover: false,
loop: false,
bullets: 0,
caption: false,
captionEffect: 'parallax',
controls: true,
controlsThumb: false,
responsive: 1,
fullScreen: false,
gestures: 2,
onBeforeStep: 0,
images: 0
}
var wowSliderContent = jQuery('.wow-slider').html();
var wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
function set() {
// Set user-defined options
wowSliderOptions.duration = document.getElementById('txtDuration').value;
wowSliderOptions.delay = document.getElementById('txtDelay').value;
// Remove original WOW Slider instance
wowSlider.remove();
// Recreate original HTML slides
jQuery('.wow-slider-container').html(wowSliderContent);
// Start WOW Slider
wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
}
</script>

Owl Carousel with conditionals on its options

I've got a dozen galleries and some of them only has one image. This is causing the carousel and page to break because the carousel has loop = true set on it. I'm trying to write a condition to say if there's more than one item in the carousel, to make loop = true else make loop = false. However, I took a shot at it but it doesn't seem to be working.
$(".mbgc-gallery").owlCarousel({
margin: 0,
dots: false,
nav:($(".mbgc-gallery .owl-item").length > 1) ? true: false,
navText: [],
loop:($(".mbgc-gallery .owl-item").length > 1) ? true: false,
autoplay: false,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
Can it work like this or do I need to do something after it initializes?
EDIT
I forgot to mention that a page could have more than one gallery on it, so I am not sure if this needs to be wrapped in a .each function or maybe a unique selector? I have data attributes set up on each gallery so it has an unique ID.

Your query in the owlCarousel configuration scans the whole document again. You select all .mbgc-gallerys and then you select all .owl-items of all .mbgc-gallerys.
But you only want to test "this" carousel. Something like this should work:
$(".mbgc-gallery").each(function(index) {
var $gallery = $(this);
var onMultiple = $gallery.children(".owl-item").length > 1 ? true : false;
$gallery.owlCarousel({
loop: onMultiple,
[...]
});
};
edit:
Made a snippet.
Like this?
$('.owl-carousel').each(function(i) {
var ifMultiple = false;
$thisGallery = $(this);
if($thisGallery.children('.item').length > 1) {
ifMultiple = true;
}
$thisGallery.owlCarousel({
loop: ifMultiple,
autoplay: true,
dots: true,
nav: true,
items: 1,
autowidth: true,
nav: false,
dots: false,
responsive:false
})
})
.item {
box-sizing: border-box;
padding: 2rem;
width: 200px;
height: 150px;
background: yellow;
}
.owl-carousel {
border: 1px solid black;
width: 200px !important;
}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://github.com/OwlCarousel2/OwlCarousel2/raw/develop/dist/owl.carousel.min.js"></script>
<h2>multiple</h2>
<div class="owl-carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<h2>single</h2>
<div class="owl-carousel">
<div class="item">1</div>
</div>
<h2>multiple</h2>
<div class="owl-carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>single</h2>
<div class="owl-carousel">
<div class="item">1</div>
</div>