0

I am trying to create a slideshow embedded inside a smartphone image for my website in the below URL link but the images are not fitted accurately. so please help out to solve this issue images inside the slider not fitted into the smartphone screen i.e width and height, can we make the images scroll inside the smartphone accurately display

url link of website

.dm-width {
   width: 350px;
   margin: 75px;
}

.iphone-mockup {
   position: relative;
   z-index: 5;
}

.dm-device {
    position: relative;
    width: 100%;
    padding-bottom:203.477897%;
    margin-bottom: 20px;
}

.device {
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -webkit-background-size: 100% 100%;
    
    background-repeat: no-repeat;
          background-image: url(https://res.cloudinary.com/di5yipnns/image/upload/v1482236588/apple-iphone_aivldo.png);
  background-size: cover;
    background-position: center center;
}

.screen {
   overflow: hidden;
    position: absolute;
    top: 18.1%;
    bottom: 20.6%;
    left: 12.49%;
    right: 17.4%;
    background-color: #E91E63;
}

.slider {
  height: 100%;
}
.slider div {
  height: 119%;
    padding: 30px;
}

.slider__item {
    font-size: 100px;
    color: rgba(255,255,255,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}


.slider__item--2 {
   background-color: #2196F3;
}
.slider__item--3 {
   background-color: #4CAF50;
}

.slider__item--4 {
  background-color: #FFC107;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script> 
<div class="dm-width">
  <div class="dm-device">
    <div class="device">
      <div class="screen">
        <div class="slider">
          <div class="slider__item slider__item--1">
            <img src="inc/img/new_2.jpg" alt="app download" >
          </div>
          <div class="slider__item slider__item--2">
           <img src="inc/img/new_1.jpg" alt="app download" >
          </div>
          <div class="slider__item slider__item--3">
            <img src="inc/img/new_3.jpg" alt="app download" >
          </div>
          <div class="slider__item slider__item--4">
            <img src="inc/img/new_4.jpg" alt="app download" >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
dale landry
  • 7,831
  • 2
  • 16
  • 28
explorer paradise
  • 1
  • Does this answer your question? [Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?](https://stackoverflow.com/questions/21103622/auto-resize-image-in-css-flexbox-layout-and-keeping-aspect-ratio) – dale landry Jun 24 '21 at 19:00
  • it is like any slider, if you use an image to make it look like a mobile makes no difference, what matters is the size of that carroussel at first so it fits/matches your image. Here your carroussel is not working . you are probably missing something about the script configuration you use. try it the other way, get your carroussel working, then include it inside the divs showing your mobile image ;) – G-Cyrillus Jun 24 '21 at 19:21

0 Answers0