Home > Back-end >  how to get the images in a 2nd slider to be the same size as the first slider
how to get the images in a 2nd slider to be the same size as the first slider

Time：04-19

I am creating two slider carousels on the same page however the images in the second slider are all different sizes and are not contained to the same width like the first carousel. Can I please get some advice on how the images on the second slider can match the first slide? The image attached shows the mismatch in the two sliders Thank you

html {
  background-color: white;
  font-family: 'Roboto', sans-serif;
}

body{
    min-height: 100vh;
    display: grid;
    place-items: centre;
}

.slider {
    height: 250px;
    margin: auto;
    position: relative;
    width: 90%
    display: grid;
    place-items: centre;
    overflow: hidden;
}

.slider2 {
    height: 250px;
    margin: auto;
    position: relative;
    width: 90%
    display: grid;
    place-items: centre;
    overflow: hidden;
}

.slide-track {
    display: flex;
    width: calc(250px * 18);
    animation: scroll 40s linear infinite;
}

.slide-track2 {
    display: flex;
    width: calc(250px * 18);
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px * 9));
    }
}

@keyframes scroll2 {
    0% {
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px * 9));
    }
}
.slide{
    height: 200px;
    width: 250px;
    display: flex;
    align-items: center;
    padding: 15px;
    perspective: 100px;
}

img {
    width: 100%
}
img:hover {
    transform: translateZ(20px);
}


.slider::before,
.slider::after {
   background: linear-gradient (to right, rgba(255,255,255,1) 0%,
   rgba(255,255,255,0) 100):
   content: '';
   height: 100x;
   position: absolute;
   width: 15;
   z-index: 2;
}

.slider::before {
   Left: 0;
   top: 0;
}

.slider::after {
   right: 0;
   top: 0;
   transform: rotateZ(180deg);

}

.slider {
    height: 250px;
    margin: auto;
    position: relative;
    width: 90%
    display: grid;
    place-items: centre;
    overflow: hidden;
}

.slide-track {
    display: flex;
    width: calc(250px * 18);
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px * 9));
    }
}

.slide{
    height: 200px;
    width: 250px;
    display: flex;
    align-items: center;
    padding: 15px;
    perspective: 100px;
}

img {
    width: 100%
}

img:hover {
    transform: translateZ(20px);
}


.slider::before,
.slider::after {
   background: linear-gradient (to right, rgba(255,255,255,1) 0%,
   rgba(255,255,255,0) 100):
   content: '';
   height: 100x;
   position: absolute;
   width: 15;
   z-index: 2;
}

.slider::before {
   Left: 0;
   top: 0;
}

.slider::after {
   right: 0;
   top: 0;
   transform: rotateZ(180deg);
}
@media screen and (max-width: 768px) {
  .slide-track {
    width: calc(80px * 20);
  }

  .slide-track2 {
    width: calc(80px * 15);
  }

  .slide {
    width: 80px;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 10));
    }
  }

  @keyframes scroll2 {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 5));
    }
  }
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Treasures</title>
  <link rel="stylesheet" href="static/pricingstyle.css">

</head>
<body>
    <!--  Carousel 1    -->
    <div >
      <div >
        <div >
          <img src='static/images/shop/london-childrens-photographer-004-1226x818.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210818173514_IMG_3340.jpg'/>
        </div>
        <div >
          <img src='static/images/portraits/kmp-yorkshire-family-photography-9.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210422183251_IMG_1091 (1).jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20220228142811_IMG_4632.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210806180418_IMG_2724 (1).jpg'/>
        </div>
        <div >
          <img src='static/images/portraits/20220102171402_IMG_4272.jpg'/>
        </div>
        <div >
          <img src='static/images/family/20200209143046_IMG_8658.jpg'/>
        </div>
        <div >
          <img src='static/images/family/20210816122750_IMG_2928.jpg'/>
        </div>
        <!-- same 9 slides doubled (duplicate) -->
        <div >
          <img src='static/images/shop/london-childrens-photographer-004-1226x818.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210818173514_IMG_3340.jpg'/>
        </div>
        <div >
          <img src='static/images/portraits/kmp-yorkshire-family-photography-9.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210422183251_IMG_1091 (1).jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20220228142811_IMG_4632.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210806180418_IMG_2724 (1).jpg'/>
        </div>
        <div >
          <img src='static/images/portraits/20220102171402_IMG_4272.jpg'/>
        </div>
        <div >
          <img src='static/images/family/20200209143046_IMG_8658.jpg'/>
        </div>
        <div >
          <img src='static/images/family/20210816122750_IMG_2928.jpg'/>
        </div>
      </div>
    </div>

    <!--  Carousel 2 -->
    <div >
      <div >
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-1.jpg'/>
        </div>
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-2.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/mountain.jpg'/>
        </div>
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-4.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/photo-1603979649806-5299879db16b.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/f115c6707855841a0f1d6297901bc676.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/20210807_202006.jpg'/>
        </div>
        <!-- same 9 slides doubled (duplicate) -->
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-1.jpg'/>
        </div>
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-2.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/mountain.jpg'/>
        </div>
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-4.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/photo-1603979649806-5299879db16b.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/f115c6707855841a0f1d6297901bc676.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/20210807_202006.jpg'/>
        </div>

      </div>
    </div>
</body>
</html>

enter image description hereI am creating two slider carousels on the same page however the images in the second slider are all different sizes and are not contained to the same width like the first carousel. Can I please get some advice on how the images on the second slider can match the first slide? The image attached shows the mismatch in the two sliders Thank you

CodePudding user response：

There were some typos in the css (a few missing semi-colons and some colons where semi-colons should be). Also, I added min-height and min-width to the img class and added the img class to the @media screen and (max-width: 768px). I do not think this is completely what you want but hope it gets you started.

html {
  background-color: white;
  font-family: 'Roboto', sans-serif;
}

body{
    min-height: 100vh;
    display: grid;
    place-items: centre;
}

.slider {
    height: 250px;
    margin: auto;
    position: relative;
    width: 90%;
    display: grid;
    place-items: centre;
    overflow: hidden;
}

.slider2 {
    height: 250px;
    margin: auto;
    position: relative;
    width: 90%;
    display: grid;
    place-items: centre;
    overflow: hidden;
}

.slide-track {
    display: flex;
    width: calc(250px * 18);
    animation: scroll 40s linear infinite;
}

.slide-track2 {
    display: flex;
    width: calc(250px * 18);
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px * 9));
    }
}

@keyframes scroll2 {
    0% {
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px * 9));
    }
}
.slide{
    height: 200px;
    width: 250px;
    display: flex;
    align-items: center;
    padding: 15px;
    perspective: 100px;
}

img {
    width: 100%;
    min-width:250px;
    min-height:250px;
}
img:hover {
    transform: translateZ(20px);
}


.slider::before,
.slider::after {
   background: linear-gradient (to right, rgba(255,255,255,1) 0%,
   rgba(255,255,255,0) 100);
   content: '';
   height: 100x;
   position: absolute;
   width: 15;
   z-index: 2;
}

.slider::before {
   Left: 0;
   top: 0;
}

.slider::after {
   right: 0;
   top: 0;
   transform: rotateZ(180deg);

}

.slider {
    height: 250px;
    margin: auto;
    position: relative;
    width: 90%;
    display: grid;
    place-items: centre;
    overflow: hidden;
}

.slide-track {
    display: flex;
    width: calc(250px * 18);
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px * 9));
    }
}

.slide{
    height: 200px;
    width: 250px;
    display: flex;
    align-items: center;
    padding: 15px;
    perspective: 100px;
}

img:hover {
    transform: translateZ(20px);
}


.slider::before,
.slider::after {
   background: linear-gradient (to right, rgba(255,255,255,1) 0%,
   rgba(255,255,255,0) 100);
   content: '';
   height: 100x;
   position: absolute;
   width: 15;
   z-index: 2;
}

.slider::before {
   Left: 0;
   top: 0;
}

.slider::after {
   right: 0;
   top: 0;
   transform: rotateZ(180deg);
}
@media screen and (max-width: 768px) {
  .slide-track {
    width: calc(80px * 20);
  }
img {
    min-width:80px;
    min-height:80px;
    max-height:80px;
}
  .slide-track2 {
    width: calc(80px * 15);
  }

  .slide {
    width: 80px;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 10));
    }
  }

  @keyframes scroll2 {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 5));
    }
  }
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Marquee Infinite scrolling LOGO carousel</title>
  <link rel="stylesheet" href="static/pricingstyle.css">
</head>
<body>
    <!--  Carousel 1    -->
    <div >
      <div >
        <div >
          <img src='static/images/shop/london-childrens-photographer-004-1226x818.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210818173514_IMG_3340.jpg'/>
        </div>
        <div >
          <img src='static/images/portraits/kmp-yorkshire-family-photography-9.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210422183251_IMG_1091 (1).jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20220228142811_IMG_4632.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210806180418_IMG_2724 (1).jpg'/>
        </div>
        <div >
          <img src='static/images/portraits/20220102171402_IMG_4272.jpg'/>
        </div>
        <div >
          <img src='static/images/family/20200209143046_IMG_8658.jpg'/>
        </div>
        <div >
          <img src='static/images/family/20210816122750_IMG_2928.jpg'/>
        </div>
        <!-- same 9 slides doubled (duplicate) -->
        <div >
          <img src='static/images/shop/london-childrens-photographer-004-1226x818.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210818173514_IMG_3340.jpg'/>
        </div>
        <div >
          <img src='static/images/portraits/kmp-yorkshire-family-photography-9.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210422183251_IMG_1091 (1).jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20220228142811_IMG_4632.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210806180418_IMG_2724 (1).jpg'/>
        </div>
        <div >
          <img src='static/images/portraits/20220102171402_IMG_4272.jpg'/>
        </div>
        <div >
          <img src='static/images/family/20200209143046_IMG_8658.jpg'/>
        </div>
        <div >
          <img src='static/images/family/20210816122750_IMG_2928.jpg'/>
        </div>
      </div>
    </div>

    <!--  Carousel 2 -->
    <div >
      <div >
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-1.jpg'/>
        </div>
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-2.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/mountain.jpg'/>
        </div>
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-4.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/photo-1603979649806-5299879db16b.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/f115c6707855841a0f1d6297901bc676.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/20210807_202006.jpg'/>
        </div>
        <!-- same 9 slides doubled (duplicate) -->
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-1.jpg'/>
        </div>
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-2.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/mountain.jpg'/>
        </div>
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-4.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/photo-1603979649806-5299879db16b.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/f115c6707855841a0f1d6297901bc676.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/20210807_202006.jpg'/>
        </div>

      </div>
    </div>
</body>
</html>

CodePudding user response：

Well, you have use the right way the calc property multiplaying the width of the element for the number of images per slide. However in your example code it was wrong. first row has 18 images while second has 14, and You use same rule (18) for both.

As a counsel, I would never recomend to do a slider with just CSS unless, for exmaple, is a test from teacher to student, javascript shoud be used.

html {
  background-color: white;
  font-family: 'Roboto', sans-serif;
}

body{
    min-height: 100vh;
    display: grid;
    place-items: centre;
}

.slider {
    height: 250px;
    margin: auto;
    position: relative;
    width: 90%
    display: grid;
    place-items: centre;
    overflow: hidden;
}

.slider2 {
    height: 250px;
    margin: auto;
    position: relative;
    width: 90%
    display: grid;
    place-items: centre;
    overflow: hidden;
}

.slide-track {
    display: flex;
    width: calc(250px * 18);
    animation: scroll 40s linear infinite;
}

.slide-track2 {
    display: flex;
    width: calc(250px * 14);
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px * 9));
    }
}

@keyframes scroll2 {
    0% {
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px * 9));
    }
}
.slide{
    height: 200px;
    width: 250px;
    display: flex;
    align-items: center;
    padding: 15px;
    perspective: 100px;
}

img {
    width: 100%
}
img:hover {
    transform: translateZ(20px);
}


.slider::before,
.slider::after {
   background: linear-gradient (to right, rgba(255,255,255,1) 0%,
   rgba(255,255,255,0) 100):
   content: '';
   height: 100x;
   position: absolute;
   width: 15;
   z-index: 2;
}

.slider::before {
   Left: 0;
   top: 0;
}

.slider::after {
   right: 0;
   top: 0;
   transform: rotateZ(180deg);

}

.slider {
    height: 250px;
    margin: auto;
    position: relative;
    width: 90%
    display: grid;
    place-items: centre;
    overflow: hidden;
}

.slide-track {
    display: flex;
    width: calc(250px * 18);
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px * 9));
    }
}

.slide{
    height: 200px;
    width: 250px;
    display: flex;
    align-items: center;
    padding: 15px;
    perspective: 100px;
}

img {
    width: 100%
}

img:hover {
    transform: translateZ(20px);
}


.slider::before,
.slider::after {
   background: linear-gradient (to right, rgba(255,255,255,1) 0%,
   rgba(255,255,255,0) 100):
   content: '';
   height: 100x;
   position: absolute;
   width: 15;
   z-index: 2;
}

.slider::before {
   Left: 0;
   top: 0;
}

.slider::after {
   right: 0;
   top: 0;
   transform: rotateZ(180deg);
}
@media screen and (max-width: 768px) {
  .slide-track {
    width: calc(80px * 18);
  }

  .slide-track2 {
    width: calc(80px * 14);
  }

  .slide {
    width: 80px;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 10));
    }
  }

  @keyframes scroll2 {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 5));
    }
  }
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Treasures</title>
  <link rel="stylesheet" href="static/pricingstyle.css">

</head>
<body>
    <!--  Carousel 1    -->
    <div >
      <div >
        <div >
          <img src='static/images/shop/london-childrens-photographer-004-1226x818.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210818173514_IMG_3340.jpg'/>
        </div>
        <div >
          <img src='static/images/portraits/kmp-yorkshire-family-photography-9.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210422183251_IMG_1091 (1).jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20220228142811_IMG_4632.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210806180418_IMG_2724 (1).jpg'/>
        </div>
        <div >
          <img src='static/images/portraits/20220102171402_IMG_4272.jpg'/>
        </div>
        <div >
          <img src='static/images/family/20200209143046_IMG_8658.jpg'/>
        </div>
        <div >
          <img src='static/images/family/20210816122750_IMG_2928.jpg'/>
        </div>
        <!-- same 9 slides doubled (duplicate) -->
        <div >
          <img src='static/images/shop/london-childrens-photographer-004-1226x818.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210818173514_IMG_3340.jpg'/>
        </div>
        <div >
          <img src='static/images/portraits/kmp-yorkshire-family-photography-9.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210422183251_IMG_1091 (1).jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20220228142811_IMG_4632.jpg'/>
        </div>
        <div >
          <img src='static/images/gallery/20210806180418_IMG_2724 (1).jpg'/>
        </div>
        <div >
          <img src='static/images/portraits/20220102171402_IMG_4272.jpg'/>
        </div>
        <div >
          <img src='static/images/family/20200209143046_IMG_8658.jpg'/>
        </div>
        <div >
          <img src='static/images/family/20210816122750_IMG_2928.jpg'/>
        </div>
      </div>
    </div>

    <!--  Carousel 2 -->
    <div >
      <div >
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-1.jpg'/>
        </div>
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-2.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/mountain.jpg'/>
        </div>
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-4.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/photo-1603979649806-5299879db16b.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/f115c6707855841a0f1d6297901bc676.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/20210807_202006.jpg'/>
        </div>
        <!-- same 9 slides doubled (duplicate) -->
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-1.jpg'/>
        </div>
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-2.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/mountain.jpg'/>
        </div>
        <div >
          <img src='https://codeconvey.com/Tutorials/global-images/image-4.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/photo-1603979649806-5299879db16b.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/f115c6707855841a0f1d6297901bc676.jpg'/>
        </div>
        <div >
          <img src='static/images/shop/20210807_202006.jpg'/>
        </div>

      </div>
    </div>
</body>
</html>

Page link：https//www.codepudding.com/Backend/376903.html

Prev:Space over Navbar
Next:How to close Hamburger menu when clicked outside the menu using Javascript
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding