Images in slideshow distort when inset is used to rotate slides

46 views Asked by At

I have a slideshow made with jshowoff[1]. I copied the important part to here. Please have a look at it.

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://panthi.lk/js/jquery.jshowoff.copy.js"></script>
  <style>
    #features {
      position: relative;
      overflow: hidden;
      width: 300px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="banner" id="mid_banner">
    <div class="jshowoff jshowoff-1" style="position: relative;">
      <div id="features" style="position: relative;">
        <a href="/">
          <img src="https://panthi.lk/test/one.png" width="100%" height="100%">
        </a>
        <a href="/">
          <img src="https://panthi.lk/test/two.png" width="100%" height="100%">
        </a>
        <a href="/">
          <img src="https://panthi.lk/test/three.png" width="100%" height="100%">
        </a>
      </div>
    </div>
  </div>

  <script type="application/javascript">
    $(document).ready(function() {
      $('#features').jshowoff({
        effect: 'slideLeft',
        changeSpeed: 2500,
        speed: 3000
      });
    });
  </script>

</body>

</html>

As you may notice, when a new image slides in, the old image is distorted while being sliding out. This happens because the image sizes are larger than the main div, and when a new image slides in the older one fist goes to its original size before it slides out.

I want to fix this. I tried many tricks, but no luck so far. CSS experts over there, your help is greatly appreciated. All I need is some clue.

[1] https://ekallevig.com/jshowoff/

1

There are 1 answers

0
Bee On

I was able to fix it with this.

<a href="/" style="height: 100%; width: 100%;">

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://panthi.lk/js/jquery.jshowoff.copy.js"></script>
  <style>
    #features {
      position: relative;
      overflow: hidden;
      width: 300px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="banner" id="mid_banner">
    <div class="jshowoff jshowoff-1" style="position: relative;">
      <div id="features" style="position: relative;">
        <a href="/" style="height: 100%; width: 100%;">
          <img src="https://panthi.lk/test/one.png" width="100%" height="100%">
        </a>
        <a href="/" style="height: 100%; width: 100%;">
          <img src="https://panthi.lk/test/two.png" width="100%" height="100%">
        </a>
        <a href="/" style="height: 100%; width: 100%;">
          <img src="https://panthi.lk/test/three.png" width="100%" height="100%">
        </a>
      </div>
    </div>
  </div>

  <script type="application/javascript">
    $(document).ready(function() {
      $('#features').jshowoff({
        effect: 'slideLeft',
        changeSpeed: 2500,
        speed: 3000
      });
    });
  </script>

</body>

</html>