We Keep Coding

How can create carousel with margin in java script?

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

How can ı make responsive my carousel and images?

I want to make an image slider that will cover fifty percent of the homepage. but somehow I can't make these photos sensitive. I want my carousel to shrink as it resizes. I just found some solutions with Jquery on the internet, but I want vanilla javascript or pure css & scss solution. How can I make my slider and photos responsive?
For demo: https://codepen.io/BerkayAkgurgen/pen/qBqMxeo
<main>
<div class="slider-container">
<div class="slider">
<div class="slider-img">
<img src="./img/batman-banner.jpg" alt="">
</div>
</div>
<div class="slider">
<div class="slider-img">
<img class="deneme2" src="./img/lord-of-the-ring.jpg" alt="">
</div>
</div>
<div class="slider">
<div class="slider-img">
<img src="./img/avengers.jpg" alt="">
</div>
</div>
<div class="slider">
<div class="slider-img">
<img src="./img/batman.jpg" alt="">
</div>
</div>
</div>
</main>
img {
display: block;
width: 100vw;
height: 100%;
object-fit: cover;
}
main {
position: relative;
width: 100vw;
height: 500px;
}
.slider {
width: 100vw;
max-height: 500px;
}
.slider-img {
width: 100vw;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

Scroll left and right when hovering on arrows

So I am trying to simply scroll left and right when someone hovers over arrows. I forked another JSFiddle and copied the html/css from my website I'm trying to do this on. Here it is: https://jsfiddle.net/31hf4e0h/
Right now it scrolls all the way to the right when you hover over either arrow, but I want the #before arrow to make it scroll to the left. Is there an easy way to do this? Or a more simple way to achieve this effect generally?
Here is the code:
$(function() {
var $container = $('#object-nav ul'),
scroll = $container.width();
$('#after').hover(function() {
$container.animate({
'scrollLeft': scroll
},{duration: 2000, queue: false});
}, function(){
$container.stop();
});
$('#before').hover(function() {
$container.animate({
'scrollLeft': scroll
},{duration: 2000, queue: false});
}, function(){
$container.stop();
});
});
Thanks!

this is perfect solution for on hover left and right scroll. jsfiddle
function loopNext(){
$('#sliderWrapper').stop().animate({scrollLeft:'+=20'}, 'fast', 'linear', loopNext);
}
function loopPrev(){
$('#sliderWrapper').stop().animate({scrollLeft:'-=20'}, 'fast', 'linear', loopPrev);
}
function stop(){
$('#sliderWrapper').stop();
}
$('#next').hover(function () {
loopNext();
},function () {
stop();
});
$('#prev').hover(function () {
loopPrev();
},function () {
stop();
});
#sliderWrapper {
left: 40px;
width: calc(100% - 80px);
white-space: nowrap !important;
height: 100%;
position: relative;
background: #999;
overflow-x: hidden;
}
img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#next {
height: 100%;
position: absolute;
right: 0;
background: #555;
z-index: 1;
}
#prev {
height: 100%;
position: absolute;
left: 0;
background: #555;
z-index: 1;
}
#imageSlider {
width: 100%;
height: 150px;
position: relative;
overflow: hidden;
}
#imageSlider img{width:100px; height:100px;}
::-webkit-scrollbar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="imageSlider">
<div id="prev">
<img src="" width="40px" />
</div>
<div id="next">
<img src="" width="40px" />
</div>
<div id="sliderWrapper">
<img src="" height="90px;" />
<img src="" height="90px;" />
<img src="" height="90px;" /><img src="" height="90px;" />
<img src="" height="90px;" />
<img src="" height="90px;" />
<img src="" height="90px;" /><img src="" height="90px;" />
<img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" />
</div>
</div>

If you want to scroll right, you still have to use 'scrollLeft', but you can scroll to right by specifying the number of pixels.
Try something like this:
$('#before').hover(function() {
$container.animate({
'scrollLeft': -100
},{duration: 2000, queue: false});
}

Automatically transfer child divs from 1st parent div to 2nd parent div

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>

Next button with different distance

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>​
​