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.
Related
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>
I need to create a table fixed on the bottom of screen (I'm so far now) and I'd like the rows to have different z-index values, because I want them to look like 'folders' where images are sliding down into it. Please have a look on the picture below, it illustrates exactly the expecting effect. Pictures (all inserted in a long sliding div) need also different z-index settings to 'go into' folders (in fact, they have to slide under the corresponding 'folder').
In your opinion, is it possible inside the table (and inside the div for images) or should I create tables (with only one row) one below the other ? This would be complicated to apply on pictures because they're randomly positioned into a 'scroller' (refers to the div mentioned above). Any example would be more than welcome!
I don't know if this will work 100% for you since I'm not entering too much in how your scroll works, but I'll give you a few tips I've tested here and it actually works, but it might have you doing a few changes on some other things. Here it goes:
First of all, as I mentioned, change the nth-child part in your css to these tags:
div .accordeon.cellule1 {
z-index: 801;
}
div .accordeon.cellule2 {
z-index: 803;
}
div .accordeon.cellule3 {
z-index: 805;
}
div .accordeon.cellule4 {
z-index: 807;
}
div .accordeon.cellule5 {
z-index: 809;
}
Now, the complicated part that may be kind of frustrating, but experiencing it was all I got. I think you will have to make a scroller for each picture to be something like this, or else the z-index will not work because all of them get the z-index from the parent. This is how I changed the CSS:
IT'S ONLY AN EXAMPLE
<div id="scroller-wrapper" class="scroller-wrapper" style="z-index: 804">
<div id="scroller" class="scroller slidedown">
<div id="img-defile1" class="img-defile">
<img src="img/ceaac.jpg"/>
</div>
</div>
</div>
<div id="scroller-wrapper" class="scroller-wrapper" style="z-index: 806">
<div id="scroller" class="scroller slidedown">
<div id="img-defile2" class="img-defile">
<img src="img/ceaac2.jpg"/>
</div>
</div>
</div>
<div id="scroller-wrapper" class="scroller-wrapper" style="z-index: 802">
<div id="scroller" class="scroller slidedown">
<div id="img-defile3" class="img-defile">
<img src="img/ceaac3.jpg"/>
</div>
</div>
</div>
<div id="scroller-wrapper" class="scroller-wrapper" style="z-index: 800">
<div id="scroller" class="scroller slidedown">
<div id="img-defile5" class="img-defile">
<img src="img/ceaac5.jpg"/>
</div>
</div>
</div>
<div id="scroller-wrapper" class="scroller-wrapper" style="z-index: 808">
<div id="scroller" class="scroller slidedown">
<div id="img-defile6" class="img-defile">
<img src="img/clic_clac.jpg"/>
</div>
</div>
</div>
<div id="scroller-wrapper" class="scroller-wrapper" style="z-index: 802">
<div id="scroller" class="scroller slidedown">
<div id="img-defile7" class="img-defile">
<img src="img/heschung.jpg"/>
</div>
</div>
</div>
Notice I turned all IDs to Classes for CSS purposes (although i kept all IDs as well for your animation purposes), and of course in the CSS I replaced the # for dots. Maybe this is not the ideal way for you, but feel free to comment below. For now, its all I have to make the pictures fit in their folders. Hope it helps you somehow! :)
I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.
You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}
thanks for reading, I try to use swiper.js and it works fine with the lazy loading demo, but in the demo, there is only one image per slide, but I want to represent 4 imgs per slide, which turns out only the first img in each slide will show up.
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- Required swiper-lazy class and image source specified in data-src attribute -->
<img data-src="1.jpg" class="swiper-lazy">
<img data-src="2.jpg" class="swiper-lazy">
<img data-src="3.jpg" class="swiper-lazy">
<img data-src="4.jpg" class="swiper-lazy">
<img data-src="5.jpg" class="swiper-lazy">
<!-- Preloader image -->
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<img data-src="2.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<img data-src="3.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<img data-src="4.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
</div>
</div>
so, I am trying to read the jquery code in swiper.js, and due to my ability, I can not figure it out, tbh, I can not understand.
any help?
I got it.
As long as I am using the same src with the ones in the slides after, it was lazy loaded too. After replacing all the data-srcs with diff ones, it works.
Thank, swiper.js
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