Javascript

シームレスな横スライドショー

'20.09.24

スライドショー設置位置に以下のコードを記載

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="slider p-0">
<div class="slider_loop slider pb-0">
<ul class="slider_loop_inner">
<li><img src="http://placehold.jp/360x180.png?text={イメージ}" alt="イメージ画像" width="900" height="720" class=""></li>
<li><img src="画像のパス" alt="イメージ画像" width="900" height="720" class=""></li>
<li><img src="画像のパス" alt="イメージ画像" width="900" height="720" class=""></li>
<li><img src="画像のパス" alt="イメージ画像" width="900" height="720" class=""></li>
</ul>
</div>
</div>
<div class="slider p-0"> <div class="slider_loop slider pb-0"> <ul class="slider_loop_inner"> <li><img src="http://placehold.jp/360x180.png?text={イメージ}" alt="イメージ画像" width="900" height="720" class=""></li> <li><img src="画像のパス" alt="イメージ画像" width="900" height="720" class=""></li> <li><img src="画像のパス" alt="イメージ画像" width="900" height="720" class=""></li> <li><img src="画像のパス" alt="イメージ画像" width="900" height="720" class=""></li> </ul> </div> </div>
<div class="slider p-0">
  <div class="slider_loop slider pb-0">
    <ul class="slider_loop_inner">
      <li><img src="http://placehold.jp/360x180.png?text={イメージ}" alt="イメージ画像" width="900" height="720" class=""></li>
      <li><img src="画像のパス" alt="イメージ画像" width="900" height="720" class=""></li>
      <li><img src="画像のパス" alt="イメージ画像" width="900" height="720" class=""></li>
      <li><img src="画像のパス" alt="イメージ画像" width="900" height="720" class=""></li>
    </ul>
  </div>
</div>

 

Javascript

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
document.addEventListener('DOMContentLoaded', function() {
// Load Event
$(window).load(function() {
loopSetUp();
loop();
})
// Resize Event
var resizetimer = false;
$(window).resize(function() {
if (resizetimer !== false) {
clearTimeout(resizetimer);
}
resizetimer = setTimeout(function() {
loopSetUp();
}, 200);
});
var windowWidth = 0;
var imageWidth = 320;
var $clone = $('.slider_loop_inner li').clone(true);
$('.slider_loop_inner')
.append($clone);
// loop
function loopSetUp() {
windowWidth = $(window).width();
switch (true) {
case (windowWidth > 768):
imageWidth = 450;
break;
case (windowWidth > 400):
imageWidth = 300;
break;
default:
imageWidth = 200;
}
$('.slider_loop_inner li').css('width', imageWidth + 'px');
$('.slider_loop_inner').css('width', function() {
return (imageWidth * $('.slider_loop_inner li').length) + 'px';
});
}
function loop() {
setTimeout(function() {
$('.slider_loop_inner').css('left', $('.slider_loop_inner').position().left - 1);
if ($('.slider_loop_inner').position().left < -imageWidth * $('.slider_loop_inner li').length / 2) {
$('.slider_loop_inner').css('left', function() {
return 0;
});
}
loop();
}, (1000 / 30))
}
})
document.addEventListener('DOMContentLoaded', function() { // Load Event $(window).load(function() { loopSetUp(); loop(); }) // Resize Event var resizetimer = false; $(window).resize(function() { if (resizetimer !== false) { clearTimeout(resizetimer); } resizetimer = setTimeout(function() { loopSetUp(); }, 200); }); var windowWidth = 0; var imageWidth = 320; var $clone = $('.slider_loop_inner li').clone(true); $('.slider_loop_inner') .append($clone); // loop function loopSetUp() { windowWidth = $(window).width(); switch (true) { case (windowWidth > 768): imageWidth = 450; break; case (windowWidth > 400): imageWidth = 300; break; default: imageWidth = 200; } $('.slider_loop_inner li').css('width', imageWidth + 'px'); $('.slider_loop_inner').css('width', function() { return (imageWidth * $('.slider_loop_inner li').length) + 'px'; }); } function loop() { setTimeout(function() { $('.slider_loop_inner').css('left', $('.slider_loop_inner').position().left - 1); if ($('.slider_loop_inner').position().left < -imageWidth * $('.slider_loop_inner li').length / 2) { $('.slider_loop_inner').css('left', function() { return 0; }); } loop(); }, (1000 / 30)) } })
document.addEventListener('DOMContentLoaded', function() {
  // Load Event
  $(window).load(function() {
    loopSetUp();
    loop();
  })

  // Resize Event
  var resizetimer = false;
  $(window).resize(function() {
    if (resizetimer !== false) {
      clearTimeout(resizetimer);
    }
    resizetimer = setTimeout(function() {
      loopSetUp();
    }, 200);
  });
  var windowWidth = 0;
  var imageWidth = 320;
  var $clone = $('.slider_loop_inner li').clone(true);
  $('.slider_loop_inner')
    .append($clone);

  // loop
  function loopSetUp() {
    windowWidth = $(window).width();
    switch (true) {
      case (windowWidth > 768):
        imageWidth = 450;
        break;
      case (windowWidth > 400):
        imageWidth = 300;
        break;
      default:
        imageWidth = 200;

    }
    $('.slider_loop_inner li').css('width', imageWidth + 'px');
    $('.slider_loop_inner').css('width', function() {
      return (imageWidth * $('.slider_loop_inner li').length) + 'px';
    });
  }

  function loop() {
    setTimeout(function() {
      $('.slider_loop_inner').css('left', $('.slider_loop_inner').position().left - 1);
      if ($('.slider_loop_inner').position().left < -imageWidth * $('.slider_loop_inner li').length / 2) {
        $('.slider_loop_inner').css('left', function() {
          return 0;
        });
      }
      loop();
    }, (1000 / 30))
  }
})

 

CSS

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.slider_loop {
position: relative;
overflow: hidden;
}
.slider_loop .slider_loop_inner {
position: relative;
left: 0;
top: 0;
margin: 0;
padding: 0;
list-style: none;
}
.slider_loop .slider_loop_inner li {
float: left;
}
.slider_loop { position: relative; overflow: hidden; } .slider_loop .slider_loop_inner { position: relative; left: 0; top: 0; margin: 0; padding: 0; list-style: none; } .slider_loop .slider_loop_inner li { float: left; }
.slider_loop {
 position: relative;
 overflow: hidden;
}

.slider_loop .slider_loop_inner {
 position: relative;
 left: 0;
 top: 0;
 margin: 0;
 padding: 0;
 list-style: none;
}

.slider_loop .slider_loop_inner li {
 float: left;
}

 

(View:2138)