We Keep Coding

Webcam into Slick Slider

I'm working with Slick Slider to generate a dynamic form using templates and one of them contains a webcam plugin.
Everything works but for example, if the slide 4 contains the webcam template, the page asks me if I want to disable or enable my webcam at the very beginning on the slide 0.
So, here is a way to load the webcam plugin WHEN I'm on the slide 4 (or 5...) for example ?
I tried to use JQuery method .hasClass but it's not working:
if ($('div.slick-slide').hasClass('slick-active') == true) {
enableWebcam();}

Try using the slick.js onBeforeChange event to react when the relevant slide is active:
$('.your-slides-class').on('beforeChange', function(event, slick, currentSlide, nextSlide){
if (nextSlide == 3) {
enableWebcam();
}
});
Notice that the slides index starts at 0, so "nextSlide ==3" refers to the fourth slide.
Also, off course you should replace the ".your-slides-class" with... the class or id with which you initiate your slider

So to fix it, here is what I've done :
When the template with the webcam plugin (webcam.js) is generated, I added a class called webcamPlugin to the slide.
I added a function afterChange to check if the ID of the current slide, so div.slick-active div.row, has the same ID as the slide with the webcamPlugin.
If yes, I enable the webcam plugin.

Slider with dynamic content is not working

I'm using Bxslider to display my images and it is working fine for the predefined images.But now, I want to get the images dynamically from the URL.
I used code like:
$('.bxslider').bxSlider({
onSlideNext : function($slideElement, oldIndex, newIndex){
$.get(myUrl,'',function(response){
$('.bxslider').html(response);
});
}
});
and it is appending the images to the slider, but the slider doesn't include those images.I also tried with reload like
var slider = $('.bxslider').bxSlider({
onSlideNext : function($slideElement, oldIndex, newIndex){
//do your ajax here, for example:
$.get(site_url + 'content/content/test','',function(response){
$('.bxslider').append(response);
slider.reloadSlider();
});
}
});
but still working.Can anyone suggest me any solution?

The slider loads slides during initialization. If reloadSlider() was not used then the slider does not know that there is a new slide was added. Also there is a newIndex property that sets the next slide.
newIndex: element index of the destination slide (after the
transition)
So when you click on Next at the end of the slideshow then newIndex=0 and even you will use reloadSlider() you will go to the slide #0. The only way here is to use goToSlide()
slider.reloadSlider();
slider.goToSlide(oldIndex+1);
Demo: http://jsfiddle.net/Gg2Sk/
Generally speaking, the idea to reload a slider on every new slide is not good at all. You might consider to load initially all slides but do not load images until they are not visible.

clicking to a specific slide on another page bootstrap carousel

So I'm trying to get this going on a bootstrap build, where on one page there are clickable states, however, these will go to a specific slide on another page.
I'm still having a tough time understanding this. My buddy, who's a Javascript developer wrote out some code, but I can't make sense of it.
<script>
function goToSlide(x) {
console.log('going to slide '+x)
$("#myCarousel").carousel(x);
}
</script>
so from page 1, click, goes to specific slide on page 2

If it's only one link going to another slide on the other page I would try something like this:
function goToSlide() {
document.location.href = page2.html;
var div = document.getElementById("slide2");
div.className = "item active";
var otherDiv = document.getElementById("slide1");
otherDiv.className = "item";
}

Take a peek at the carousel methods:
http://getbootstrap.com/javascript/#carousel-usage
You would probably want to use .carousel(number), in conjunction with URL parameters or hash tags as #Lukas mentioned above. Just watch for the hash/parameter in the URL, and have the carousel load with that slide active.

Why is bxslider duplicating my divs

My designer put a bxslider to scroll through 3 divs nicely on my page.
When the page runs, in the html I see it generates 6 divs on the page. It shows div 3, div2, div1, div3, div2, div1.
Just because the duplicated fields on my page now mess up my programing.
Is that neccesary, and is there any way I can touch the code that it shouldn't duplicate my divs?
The page is full of complex code , with an ajax passing the data-serialize to a post form.
Becuase it's all duplicated, now all fields are coming through as 'value,value'. Therefore it's not giving me accurate respones, and well as undefined when it's supposed to be numeric.
My form posts looks like this:
function submitCart () {
$.post(
"scripts/savecart.asp",
$("#form1").serialize()
);}
How could I add that not bx- to it?

As commented in the source code of bxSlider:
if infinite loop, prepare additional slides
So I was able to fix this by adding infiniteLoop: false to the config object:
$(".js-slider").bxSlider({
infiniteLoop: false
});

BxSlider duplicates elements to allow infinite scrolling, etc. For example, say you only have two elements in your slider. Element one might be sliding out on the left, but also sliding in on the right. Therefore, duplicates are required.
If this is a problem, you can usually interact with the duplicates using their bx-clone classes. If you could clarify the actual problem, we could probably give more specific advice.
Update: To eliminate cloned elements from your set, try something like:
$('.bxslider li:not(.bx-clone)')....

I had such problem with bx-clone
I want to use it for an image gallery. So I had a thumbnail image slider and for slider I used bx-slider and on each click on small image , that image in bigger size must show in a div , But on bx-clone clicked nothing happened
I solved that problem with this :
var slider = $('.bxslider').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 92,
moveSlides: 1,
pager: false,
slideMargin: 10,
onSliderLoad: function(){
$('li.bx-clone').click(function() {
/** your code for bx clone click event **/
});
}
});

Adding to #antongorodezkiy's answer, there is a way to have infiniteLoop: false and still get a non-stopping slide changing: using the onSlideAfter event of the last slide you can, after a few seconds, go back to the first slide and re-start the auto mode:
var pauseTime = 4000; //Time each slide is shown in ms. This is the default value.
var timeoutId;
var slider = $('.bxslider').bxSlider({
auto: true,
infiniteLoop: false,
pause: pauseTime,
onSlideAfter: function ($slideElement, oldIndex, newIndex) {
if (newIndex === slider.getSlideCount() - 1) { //Check if last slide
setTimeout(
function () {
slider.goToSlide(0);
slider.startAuto(); //You need to restart the "auto" mode
},
pauseTime //Use the same amount of time the slider is using
);
}
else { //In case the user changes the slide before the timeout fires
clearTimeout(timeoutId);
slider.startAuto(); //Doesn't affects the slider if it's already on "auto" mode
}
}
});
The difference between this solution and the infiniteLoop: true option is that instead of smoothly transitioning back to the first slide as if it was the next, the slider quickly "rewinds" until reaching the first slide.

for above query: Is it possible to keep having the infinite loop, but remove the clones?
try using below code: if more than 1 item infiniteloop: true else :false
infiniteLoop: ($j("...selector...").length < 2) ? false : true,

Just to answer here, so if some one is struggling and cannot fix the duplication issue. I was facing the same problem that all of my HTML from my page was duplicating inside the first slide under the image tag like bellow:
<img src="public/admin/scr3.png" ><div>..... all of my page HTML...</div></img>
I just found that I was writing the image tag not properly
Meaning my code was something like this for image tag
<img src="public/admin/scr3.png" >
I just replaced my image tag with valid HTML like bellow:
<img src="public/admin/scr3.png" />
and it fixed the content duplication issue.
Hope it will help someone.
Cheers!

I´m not sure if it´s the same issue I was facing, but here´s my case:
My code was using bx slider together with fancybox. And it was duplicating my slides. The solution was to put the secodary code (fancy box), which was generated in my image loop, inside the tag. That did it for me.

bxslider wont stop

I am having an issue where the slider will not stop auto play when I click a link on my navigation menu. I start the slider via:
$('.bxslider1').bxSlider({auto: true,autoControls: true});
It auto plays and works, but if I try to stop the slider by creating an onclick function or .click() jQuery like:
$(".nav-portfolio").click(function() {
slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
It seems to do something for a split second and then start again. The reason I need to stop the slider is, I am using jQuery waypoints for anchor links to scroll smooth horizontally, and the panels start moving back and fourth by 1 or 2 pixels and its really annoying for the user.
Any help would be appreciated.

Try modifying your code to be:
$(".nav-portfolio").click(function() {
$('.bxslider1').stopAuto();
});
You were previously using the example from the bxSlider webpage which assumes you haven't already initialized the bxSlider. Since you previously initialized it perhaps the second initialization isn't handled gracefully.

Try adding var keyword before the slider declaration.
$(".nav-portfolio").click(function() {
var slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});