I want to create a carousel that Looks like the photo below.
carousel photo
this shows the carousel and carousel created with some photos with different widths.
I want the carousel to be moved by the margin of each photo width.
my codes work seem correct but the carousel does not work :(
Which part of the codes are wrong??
this is my Html codes :
<div class="container">
<img src="./previous.png" alt="" class="previous">
<div class="frame">
<div class="carousel">
<div class="images">
<div> <img class="img" src="./images/avatar_1.png" alt="" width="50px"></div>
<div><img class="img" src="./images/avatar_2.png" alt="" width="100px"></div>
<div><img class="img" src="./images/avatar_3.png" alt="" width="150px"></div>
<div><img class="img" src="./images/avatar_4.png" alt="" width="100px"></div>
<div><img class="img" src="./images/avatar_5.png" alt="" width="200px"></div>
<div><img class="img" src="./images/avatar_6.png" alt="" width="100px"></div>
<div><img class="img" src="./images/avatar_7.png" alt="" width="140px"></div>
<div><img class="img" src="./images/avatar_8.png" alt="" width="180px"></div>
<div><img class="img" src="./images/avatar_9.png" alt="" width="190px"></div>
<div><img class="img" src="./images/avatar_10.png" alt="" width="100px"></div>
</div>
</div>
</div>
<img src="./next.png" alt="" class="next">
</div>
and this is my CSS codes :
.frame {
width: 350px;
height: 150px;
overflow: hidden;
margin: 0px 20px;
border-radius: 10px;}
.carousel{
overflow: hidden;
background-color: rgb(100, 98, 98);
border-radius: 10px;
margin-left: auto;
margin-right: auto;
position: relative;
width: 100%;}
.images{
display: flex;
height: auto;
position: relative;
width: 100%;
height: 100%;}
.imgs{
height: 130px;
margin: 10px 0px 10px 10px;
border-radius: 5px;}
and this is my Javascript codes:
let images = document.querySelector(".images")
let next = document.querySelector(".next")
let previous = document.querySelector(".previous")
let carousel = document.querySelector(".carousel")
let img = document.querySelectorAll(".img")
next.addEventListener("click", RightClick)
let count = 0
function RightClick() {
if (count < 40) {
let widthImage = img[count].width
moveRight(widthImage)
count++
}
}
function moveRight(widthImage) {
images.style.marginRight = widthImage + "px"
}
previous.addEventListener(LefttClick)
function LefttClick() {
if (count < 40) {
let widthImage = img[count].width
moveRight(widthImage)
count++
}
}
function moveLeft(widthImage) {
images.style.marginLeft = widthImage + "px"
}
important: this is necessary to carousel moved by a margin every click on next or prev button
important 2 = The margin should be the size of the photos
Related
I am trying to stack images two on top of two when the screen size is less than 500px (for example) using javascript. Each of these images can have an href link but won't always.
This is some example html when greater than 500px:
<div id="topbanners1-4-a" style="display: inline-block; white-space: nowrap">
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/0.png" style="width: 25%; margin-bottom: 10px" alt="" />
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/2.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
<a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/4.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
</a>
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/3.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
</div>
I'm having trouble figuring out the best way to do this. Ultimately I'd like to have something like this when the screen size is less than 500px:
<div id="topbanners1-4-a" style="display: inline-block; white-space: nowrap">
<div id="one">
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/0.png" style="width: 25%; margin-bottom: 10px" alt="" />
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/2.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
</div><div id="two">
<a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/4.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
</a>
<img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/3.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
</div>
</div>
Here's an example so far, although images are missing:
http://plnkr.co/edit/obLQorTFEsI467AHJspm?p=preview
Looking for any help or advice that will help me achieve this.
Have you tried doing it with CSS media queries?
#media (max-width: 500px) {
#topbanners1-4-a img {
width: 50%;
}
}
You can use javascript and its matchMedia and alter inline styles, though it is recommended to use classes and external CSS rules.
Stack snippet
function watchMedia(wM) {
if (wM.matches) { // If media query matches
document.querySelector('#topbanners1-4-a').style.whiteSpace = "normal";
var imgs = document.querySelectorAll('#topbanners1-4-a img');
for(var i=0;i<imgs.length;i++){
imgs[i].style.width = "calc(50% - 10px)";
imgs[i].style.marginBottom = "10px";
if (i % 2 == 1)
imgs[i].style.marginLeft = "10px";
}
} else {
document.querySelector('#topbanners1-4-a').style.whiteSpace = "nowrap";
var imgs = document.querySelectorAll('#topbanners1-4-a img');
for(var i=0;i<imgs.length;i++){
imgs[i].style.width = "25%";
imgs[i].style.marginBottom = "0";
if (i % 2 == 1)
imgs[i].style.marginLeft = "0";
}
}
}
var wM = window.matchMedia("(max-width: 700px)")
watchMedia(wM) // Call once at page load
wM.addListener(watchMedia) // Listen for state changes
<div id="topbanners1-4-a" style="display: inline-block; white-space: nowrap">
<img id="front-end-top" src="http://placehold.it/300/f00" style="width: 25%; margin-bottom: 10px" alt="" />
<img id="front-end-top" src="http://placehold.it/300/0f0" style="width: 25%; margin-bottom: 10px" alt="" />
<a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
<img id="front-end-top" src="http://placehold.it/300/00f" style="width: 25%; margin-bottom: 10px" alt="" />
</a>
<img id="front-end-top" src="http://placehold.it/300/f0f" style="width: 25%; margin-bottom: 10px" alt="" />
</div>
Or CSS media query and external CSS rules
#topbanners1-4-a {
display: inline-block;
white-space: nowrap;
}
#topbanners1-4-a img {
width: calc(25% - 5px);
}
#media screen and (max-width: 700px) {
#topbanners1-4-a {
white-space: normal;
}
#topbanners1-4-a img {
width: calc(50% - 10px);
margin-bottom: 10px;
}
#topbanners1-4-a > *:nth-child(even) {
margin-left: 10px;
}
}
<div id="topbanners1-4-a">
<img id="front-end-top" src="http://placehold.it/300/f00" alt="" />
<img id="front-end-top" src="http://placehold.it/300/0f0" alt="" />
<a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
<img id="front-end-top" src="http://placehold.it/300/00f" alt="" />
</a>
<img id="front-end-top" src="http://placehold.it/300/f0f" alt="" />
</div>
After the animation of the images sliding finishes, it continues to slide right forever, I have tried a setTimeout to move the images back left so it restarts but then the setInterval animation stops.
Is there a way to move the #slidewindow left 400% so that the slide can restart from the beginning again creating an infinite loop ?
Thank You very much for all contributions!!!
HTML:
<div id="slide-box">
<div id="slidewindow">
<div id="Img1">
<img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
</div>
<div id="Img2">
<img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
</div>
<div id="Img3">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
</div>
<div id="Img4">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
</div>
<div id="Img5">
<img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
</div>
</div>
</div>
CSS:
#slide-box{
width: 80%;
border: solid;
border-color: white;
border-width: 1rem;
background-color: yellow;
display: inline-block;
overflow: hidden;
}
#slidewindow{
float: left;
width: 500%;
margin: 0;
position: relative;
}
.imgs{
width: 20%;
float: left;
margin: 0 0 0 0;
}
JQUERY:
setInterval(function(){
$('#slidewindow').animate({
right:'+=100%',
}, 1000);
}, 2000);
If you restore the animated right property after the animation, and then move the first image to the end of the list, you get an ever ongoing slide show:
setInterval(function(){
$('#slidewindow').animate({
right:'+=100%',
}, 1000, function () { // Add this callback function
// Reinject the first image at the end, and set "right" back to 0
$('#slidewindow').append($('#slidewindow>div:first')).css({ right: 0 });
});
}, 2000);
#slide-box{
width: 80%;
border: solid;
border-color: white;
border-width: 1rem;
background-color: yellow;
display: inline-block;
overflow: hidden;
}
#slidewindow{
float: left;
width: 500%;
margin: 0;
position: relative;
}
.imgs{
width: 20%;
float: left;
margin: 0 0 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-box">
<div id="slidewindow">
<div id="Img1">
<img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
</div>
<div id="Img2">
<img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
</div>
<div id="Img3">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
</div>
<div id="Img4">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
</div>
<div id="Img5">
<img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
</div>
</div>
</div>
Here is my version, its a more generic, please try to use this in your code!
var right = 0;
setInterval(function() {
//determine the right position minus the width of one image.
right = parseInt($('#slidewindow').css("right")) + $('.imgs').width();
//check if the right position has reach the end, i.e width of the slidewindow
if (right === $('#slidewindow').width()) {
//if the end is reached you can use the below line to directly send it to the first image.
//$('#slidewindow').css("right", "0px");
//or
//if you want to animate the return to the first line, use the below JS
$('#slidewindow').animate({
right: '0'
}, 1000);
} else {
//since we have not reached the end of the width, increase the slide
$('#slidewindow').animate({
right: '+=100%'
}, 1000);
}
//on each interval, add the width of the slide that was moved to the right variable!
right += parseInt($('#slidewindow').css("right"));
}, 2000);
#slide-box {
width: 80%;
border: solid;
border-color: white;
border-width: 1rem;
background-color: yellow;
display: inline-block;
overflow: hidden;
}
#slidewindow {
float: left;
width: 500%;
margin: 0;
position: relative;
}
.imgs {
width: 20%;
float: left;
margin: 0 0 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-box">
<div id="slidewindow">
<div id="Img1">
<img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
</div>
<div id="Img2">
<img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
</div>
<div id="Img3">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
</div>
<div id="Img4">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
</div>
<div id="Img5">
<img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
</div>
</div>
</div>
You could use a global counter...
var counter = 0;
setInterval(function(){
if(counter == 3)
{
$('#slidewindow').animate({
right:'-=300%',
}, 1000);
counter = 0;
}
else
{
$('#slidewindow').animate({
right:'+=100%',
}, 1000);
counter++;
}
}, 2000);
#slide-box{
width: 80%;
border: solid;
border-color: white;
border-width: 1rem;
background-color: yellow;
display: inline-block;
overflow: hidden;
}
#slidewindow{
float: left;
width: 500%;
margin: 0;
position: relative;
}
.imgs{
width: 20%;
float: left;
margin: 0 0 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-box">
<div id="slidewindow">
<div id="Img1">
<img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
</div>
<div id="Img2">
<img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
</div>
<div id="Img3">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
</div>
<div id="Img4">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
</div>
<div id="Img5">
<img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
</div>
</div>
</div>
There is a huge problem with masonry: it makes some useless spaces between blocks. I already tried everything, but nothing helps it.I would really apreciate if someone could tell me how to resolve this problem. Check screenshot.Result
UPDATE: I figured out, that the problem starts with first figure "T-Shirts". Somehow, when I delete class width-1 from there everything fits as it's meant to be.
Why is it happening and how can I solve this problem? Any suggestions? I really can't delete that figure, there must be some way to fit it with other blocks. Please help.
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item',
columnWidth: 230
});
// element argument can be a selector string
// for an individual element
var msnry = new Masonry( '.grid', {
// options
});
main
{
height: 630px;
margin-top: 40px;
margin-left: 18%;
width: 1500px;
}
figcaption
{
position: absolute;
width: 100%;
height: 41px;
bottom: 0px;
padding-top: 13px;
padding-left: 20px;
font-size: 21.333px;
font-family: "SegoeUIBold";
opacity: 0.8;
background-color: #FFF;
}
.grid-item
{
width: 230px;
height: 180px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
.height-1
{
height: 370px;
}
.width-1
{
width: 360px;
}
.width-2
{
width: 470px;
}
.height-2
{
width: 360px;
height: 370px;
}
.width-2 img
{
width: 470px;
height: 180px;
}
<main class="grid">
<figure class="grid-item height-1 width-1">
<img src="img/greenTshirt.png" alt="">
<figcaption>T-Shirts</figcaption>
</figure>
<figure class="grid-item">
<img src="img/cards.png" alt="">
<figcaption>Cards</figcaption>
</figure>
<figure class="grid-item">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="grid-item width-2">
<img src="img/notebooks.png" alt="">
<figcaption>Notebooks</figcaption>
</figure>
<figure class="grid-item">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
<figure class="grid-item height-1">
<img src="img/bags.png" alt="">
<figcaption>Bags</figcaption>
</figure>
<figure class="grid-item">
<img src="img/scrum.png" alt="">
<figcaption>Scrum cards</figcaption>
</figure>
<figure class="grid-item">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="grid-item width-1">
<img src="img/redCaps.png" alt="">
<figcaption>Caps</figcaption>
</figure>
<figure class="grid-item">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="grid-item">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="grid-item">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
</main>
You're missing imagesLoaded.
example:
// init Masonry
var $grid = $('.grid').masonry({
// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
I have created two parent <div>. Inside the first parent <div> I have written a loop,where twenty child <div> is getting created. I want at the time of child <div> creation, when the height of the first parent <div> will get full, then the rest of the child <div> will automatically get transferred into the second parent <div>.
I failed in every try. I am just sharing my basic codes.
Css
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.div1 {
height: 100%;
width: 50%;
background-color: red;
float: left;
}
.div2 {
height: 100%;
width: 50%;
background-color: blue;
float: left;
}
.child{
height:100px;
width:200px;
background-color:yellow;
margin:1px;
}
Html
<div class="div1">
#for (int i = 0; i < 20; i++)
{
<div class="child">#i</div>
}
</div>
<div class="div2"></div>
Can someone please help?
Do you wanna use columns? Then use that!
.parent {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
<div class="parent">
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
<div><img src="http://placehold.it/350x150" /></div>
</div>
I'm trying to create a slider with a next button, the images inside my horizontal div are different sizes. I can animate the images with a fixed-width once, I would like to click through the images with one button. So far I have this:
//function will slide 500px but images are different size so 500px wont work?
$(function() {
$("a.right").click(function() {
$(".rolodexSlider").stop().animate({
left: "-500px",
}, 500);
return false;
});
});
<!-- wrapper holds slider -->.rolodexWrapper {
width: 500px;
height: 300px;
margin: 0 auto;
}
<!-- slider holds images -->.rolodexSlider {
height: 300px;
width: 2000px;
position: relative;
}
img {
border: #FF0 solid 1px;
margin: 10px;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="rolodexLetters">
<li>L</li>
<li>R</li>
</ul>
<div class="rolodexWrapper">
<div class="rolodexSlider">
<div><img src="" width="250px" height="100px" /></div>
<div><img src="" width="200px" height="100px" /></div>
<div><img src="" width="300px" height="100px" /></div>
<div><img src="" width="275px" height="100px" /></div>
</div>
</div>