Develop Reference

Swiper.js duplicate slide

I try to create Swiper.js card with one slide which transform: translate3d on image, unfortunately Swiper duplicate my image and card clipping across when flipping
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="fg">
<img src="assets/img/lelay.png" alt="" />
<img src="assets/img/lelay-title.png" alt="" />
</div>
<div class="bg">
<img src="assets/img/shape.png" alt="" />
</div>
</div>
</div>
Here's Fiddle!
https://jsfiddle.net/arz4t8k9/10/
thanks

I think the problem is in the backface of the bg and fg elements.
You can try to give them backface-visibility:hidden so the backface doesn't show, like that:
fg, .bg{
backface-visibility: hidden;
}
and now there is nothing in the background, but the slide shows just one size until you reach the another side, it will be visible.
If it's not what you want, explain me your goal and I will try to help more.

Make images inside a slideToggle div to fade-in when entering viewport

I have a series of very large images on my site that FadeInUp when entering the viewport.
Each of these images works also as a toggle button to vertically slide open a div that contains other images. I would like also these images (inside the slidetoggle div) to FadeInUp when entering the viewport.
Once the div slides open, my code only works with the first image; all the others just enter the viewport with no effect, even if I gave the same class to all the images.
To animate my images, I am using the wow.js and the animate.css library (with the FadeInUp animation)
https://wowjs.uk
For the toggle panel this code: https://jsfiddle.net/bv0jyzq1/1/
Does anybody know where the problem might be?
The effect is applied to all the images only if I remove the
#show-images {display: none;}
which is obviously not what I want to do
Thanks
Edit: this is also my html code
<div id="project-images">
<!-- Main IMG to Click -->
<div id="toggle" class="wow fadeInUp">
<img src="..."/>
</div>
<!-- Slides Open -->
<div id="show-images">
<div>
<img class="wow fadeInUp" src="..."/>
</div>
<div>
<img class="wow fadeInUp" src="..."/>
</div>
<div>
<img class="wow fadeInUp" src="..."/>
</div>
</div>
</div>

Toggle images on beforeChange event with Slick

I am trying to figure out how to show and hide some images depending on the clicked element with one of the events of Slick.
<div class="items" id="icons-tabs">
<a href="javascript:void(0)" class="item iconClicked" data-tab="tab0">
<img src="/researchicon.png" alt="" class="img-active">
<img src="/researchKOSelected.svg" alt="" class="img-inactive">
</a>
<a href="javascript:void(0)" class="item iconClicked" data-tab="tab1">
<img src="/WideRange.png" alt="" class="img-active">
<img src="/WideRangeUpSelected.svg" alt="" class="img-inactive">
</a>
<a href="javascript:void(0)" class="item iconClicked" data-tab="tab2">
<img src="/SSI_toolbox.png" alt="" class="img-active">
<img src="/toolboxKOSelected.svg" alt="" class="img-inactive">
</a>
<a href="javascript:void(0)" class="item iconClicked" data-tab="tab3">
<img src="/PricingIcon.png" alt="" class="img-active">
<img src="/PricingIconUpSelected.svg" alt="" class="img-inactive">
</a>
</div>
As you see in that markup, there are some images with the class img-active which are the images that the user will see when the document is ready.
That set of images looks like this:
All I need is that when you click over the image, it must hide the current one and show the image with the class img-inactive, so it must be like a kind swap of classes between img-inactive and img-active.
This what I have done so far:
$mobSlick.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('a[data-tab="tab'+nextSlide+'"] > img')
.first()
.addClass('img-inactive')
.removeClass('img-active');
$('a[data-tab="tab'+currentSlide+'"] > img')
.first()
.addClass('img-active')
.removeClass('img-inactive');
$('a[data-tab="tab'+nextSlide+'"] > img')
.not(":eq(0)")
.addClass('img-active')
.removeClass('img-inactive');
$('a[data-tab="tab'+currentSlide+'"] > img')
.not(":eq(0)")
.addClass('img-inactive')
.removeClass('img-active');
});
The problem with this code is that it works almost fine when you click the items from left to right, but when you do it from right to left or with no order at all, it crashes.
Any suggestions?

You are making this way too hard.
First of all, inline javascript (href="javascript:void(0)") is not a good tactic and you should use Content Security Policy to make sure it's not run any inline stuff.
Second I believe what you want is way too simple for the script you have written. You just need to insert style="display:none;" on img-inactive images and the following jquery code.
`$('.iconClicked').click(function() {
$(this).children().toggle();
});`
Then again you could insert some animation to it, like fade. To do that you should position the images absolutely, so each pair is on the same spot. You add transition on the opacity attribute of the images and with jquery you toy with opacity as needed.
If you simultaneously set one to opacity 1 and the other to 0, then the images will be semitransparent for a while. To prevent this, you should set one image to opacity 1 and set a timer (with setTimout) to then change the other to 0.
Edit:
You can also use toggleClass('img-active img-inactive'); instead of plain toggle(). This will interchange the classes. I vaguely understand your exact problem, so if this does not answer your question, maybe you should give some more info.

jquery cycle2 slideshow nested slideshow next and prev buttons

I use cycle2 plugin to display a slideshow comprised of some images and another slide show. The inner slideshow's next and prev buttons does not work for some reason(up and down, in the example) although they are properly set IMHO:
data-cycle-prev="#upDiv"
data-cycle-next="#downDiv"
and
<div id="upDiv">
<img src="images/up.png" alt="" />
<p>scroll up</p>
</div>
<div id="downDiv">
<p>to see more scroll down</p>
<img src="images/down.png" alt="" class="outer-slide" />
</div>
How can I make them work?
here is a demo: http://jsfiddle.net/FKU2L/22/

There're a few issues
First, in cycle 2, nested slideshows should look like this:
<div class="cycle-slideshow" data-cycle-slides="> div">
<div><img src="..."/></div>
<div>
<div class="cycle-slideshow inner-slideshow">
<img src="..."/>
<img src="..."/>
</div>
</div>
<div><img src="..."/></div>
</div>
The important things are that the slides should all be the same tag, like img img img or div div div not img div img. So you'll need to wrap your first level of slide imgs inside of divs. Since they are now not img, which is the default, you need to set data-cycle-slides="> div" on the outer slideshow.
In addition, you also need your inner slideshow to be inside of a div as well, like <div><div class="cycle-slideshow inner-slideshow"> instead of just <div class="cycle-slideshow inner-slideshow">. Slideshows can be nested, but not crossing swords.
What's currently happening on your example is that it's running both slideshows together, using the same next and prev buttons for both shows, and ripping the imgs out of the divs. So instead of running 2 nested slideshows, you're running 2 concurrent slideshows, where one happens to be inside of the other, which is a by-product of the slideshows directly touching each other and the first show's slides not being nested in divs.
made a working fiddle: http://jsfiddle.net/filever10/dLQPD/
You can learn more by viewing the source here: http://jquery.malsup.com/cycle2/demo/nested.php

Show next and previous image in Twitter Bootstrap Carousel

I’m searching for a way to display the next and previous slideshow image within the Twitter Bootstrap Carousel.
As per default it just show the current image and if I remove the display:none css property it has every item in the carousel below each other. I’ve tried to play with the CSS but haven’t got it to work.
The idea is to display the current slideshow image in the middle and then the next and previous image with opacity, not necessarily clickable.
I’ve tried different slideshows and carousels but can’t seem to find anyone which satisfies these requirements and some of those who come close will not adapt to the responsive design that Bootstrap provides.
Normally when I’m using the carousel with multiple items, I just group e.g. images within the <div class="item"> div like:
<div class="item active">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
But this will not do what I want because it rotates all three items at the time and not take one image each.
Any suggestion, advice, or link for some walk-through or tutorial will be very much appreciated.
Cheers

This is the link that helped me
Twitter Bootstrap 101: The Carousel