Wep Siteniz İçin Logo Slider Yapımı

Java Kodları

<script type="text/javascript">

$(function(){
 // vars for clients list carousel
 // https://bloggeriz.blogspot.com/2021/02/wep-siteniz-icin-logo-slider-yapm.html
  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 220); // 140px width for each client item 
  $clientcarousel.css('width',clientwidth);
  
  var rotating = true;
  var clientspeed = 0;
  var seeclients = setInterval(rotateClients, clientspeed);
  
  $(document).on({
    mouseenter: function(){
      rotating = false; // turn off rotation when hovering
    },
    mouseleave: function(){
      rotating = true;
    }
  }, '#clients');
  
  function rotateClients() {
    if(rotating != false) {
      var $first = $('#clients-list li:first');
      $first.animate({ 'margin-left': '-220px' }, 5000, "linear", function() {
        $first.remove().css({ 'margin-left': '0px' });
        $('#clients-list li:last').after($first);
      });
    }
  }
});
 </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

css Kodları

<style type="text/css">/*Logo carousel*/
#clients {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#clients .clients-wrap {
    display: block;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

#clients .clients-wrap ul {
    display: block;
    list-style: none;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 220px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: 0 linear left;
  -moz-transition: 0 linear left;
  transition: 0 linear left;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65); 
  opacity: 0.65;
}
#clients .clients-wrap ul li img:hover {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100); 
  opacity: 1.0;
}
</style>

HTML Kodları

<div id="clients">
  <div class="clients-wrap">
    <div class="clients-wrap">
    <ul id="clients-list" class="clearfix">
      <li><img src="https://i.hizliresim.com/V3HrN5.png" alt="1tasarım"></li>
      <li><img src="https://i.hizliresim.com/VqNdCv.png" alt="2tasarım"></li>
      <li><img src="https://i.hizliresim.com/qzq34I.png" alt="1tasarım"></li>
      <li><img src="https://i.hizliresim.com/iYnmRA.png" alt="1tasarım"></li>
      <li><img src="https://i.hizliresim.com/wPSxT7.png" alt="1tasarım"></li>
      <li><img src="https://i.hizliresim.com/Obi9np.png" alt="1tasarım"></li>
      <li><img src="logo/7.png" alt="1tasarım "></li>
      <li><img src="logo/8.png" alt="1tasarım"></li>
    
     
     
    </ul>
  </div>
  <!-- @end .clients-wrap -->
</div>
<!-- @end #clients -->

Demosu https://codepen.io/bloggeriz/pen/MWbexqe