2017-07-04 21 views
1

私は、HTML、CSS、およびJQueryを使用したコンテンツスライダのために以下のコードを用意しています。純粋なCSSだけを使って、私が今持っているものを得ることは可能でしょうか?純粋なCSSでは不可能な場合は、JQueryを使用しないでバニラのJavaScriptを使用することは可能ですか?何でも助けてくれる、歓声。コンテンツスライダ純粋なCSS

$(function(){ 
 
     var scroller = $('#scroller div.innerScrollArea'); 
 
     var scrollerContent = scroller.children('ul'); 
 
     scrollerContent.children().clone().appendTo(scrollerContent); 
 
     var curX = 0; 
 
     scrollerContent.children().each(function(){ 
 
      var $this = $(this); 
 
      $this.css('left', curX); 
 
      curX += $this.outerWidth(true); 
 
     }); 
 
     var fullW = curX/2; 
 
     var viewportW = scroller.width(); 
 

 
     // Scrolling speed management 
 
     var controller = {curSpeed:0, fullSpeed:2}; 
 
     var $controller = $(controller); 
 
     var tweenToNewSpeed = function(newSpeed, duration) 
 
     { 
 
      if (duration === undefined) 
 
       duration = 600; 
 
      $controller.stop(true).animate({curSpeed:newSpeed}, duration); 
 
     }; 
 

 
     // Pause on hover 
 
     scroller.hover(function(){ 
 
      tweenToNewSpeed(0); 
 
     }, function(){ 
 
      tweenToNewSpeed(controller.fullSpeed); 
 
     }); 
 

 
     // Scrolling management; start the automatical scrolling 
 
     var doScroll = function() 
 
     { 
 
      var curX = scroller.scrollLeft(); 
 
      var newX = curX + controller.curSpeed; 
 
      if (newX > fullW*2 - viewportW) 
 
       newX -= fullW; 
 
      scroller.scrollLeft(newX); 
 
     }; 
 
     setInterval(doScroll, 40); 
 
     tweenToNewSpeed(controller.fullSpeed); 
 
    });
#scroller { 
 
    position: absolute; 
 
} 
 

 
#scroller .innerScrollArea { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
#scroller ul { 
 
    padding: 0; 
 
    position: relative; 
 
} 
 

 
#scroller li { 
 
    padding: 0; 
 
    list-style-type: none; 
 
    position: absolute; 
 
} 
 
.circle { 
 
    width: 250px; 
 
    height: 250px; 
 
    position: relative; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    border-radius: 50%; 
 
    background-color:transparent; 
 
    border-style:solid; 
 
    border-width:9px; 
 
    border-color:#006850; 
 
} 
 

 
.circle-text { 
 
    color: #1f497d; 
 
    font-family:Verdana; 
 
    font-size: 20.5px; 
 
    text-align: center; 
 
    width: 200px; 
 
    top: 90px; 
 
    left: 10%; 
 
    bottom: 0; 
 
    position: absolute; 
 
    z-index: 99; 
 
} 
 

 
.arrow { 
 
    width:300px; 
 
    height:80px; 
 
} 
 

 
.flipimage { 
 
    width:300px; 
 
    height:80px; 
 
    -moz-transform: scaleY(-1); 
 
    -webkit-transform: scaleY(-1); 
 
    -o-transform: scaleY(-1); 
 
    transform: scaleY(-1); 
 
    -ms-filter: fliph; /*IE*/ 
 
    filter: fliph; /*IE*/ 
 
} 
 

 
.everything { 
 
    /*transform: scale(0.6); 
 
}
<div class="everything"> 
 
<div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;"> 
 
    <div class="innerScrollArea"> 
 
     <ul> 
 
    \t \t <li> 
 
      <br style="line-height:89px;"/> 
 
     <div class="circle"> 
 
     <div class="circle-text"> 
 
     HR Connect<br/>Service<br/>Representative 
 
     </div> 
 
     </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
     </li> 
 
      \t \t <li> 
 
       <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
     <div class="circle"> 
 
     <div class="circle-text"> 
 
Employee<br/>Relations<br/>Specialist 
 
     </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
      <br style="line-height:89px;"/> 
 
     <div class="circle"> 
 
     <div class="circle-text"> 
 
     Employee<br/>Relations<br/>Manager 
 
     </div> 
 
     </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
     </li> 
 
      \t \t <li> 
 
       <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
     <div class="circle"> 
 
     <div class="circle-text"> 
 
Director, Employee<br/>Relations &<br/>Well-Being 
 
     </div> 
 
     </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</div>

+1

バニラJSでクローニングがかなり難しいです。 ':(' –

+1

@PraveenKumar Pure CSS? –

答えて

2

あなたはanimationを使用することができるが、永遠にスライド全体を保つために、あなたはクローンを作成(またはHTML内の冗長コピーを作成)する必要がありますあなたが見るの要素の少なくとも最初はスライダーで。そうでなければ、それはmarqueeのように振る舞い、すべてが箱から外れるまで空白を残す。

例以下:

/* all position:absolute removed */ 
 
#scroller { 
 
overflow:hidden; 
 
} 
 

 
#scroller .innerScrollArea { 
 

 
} 
 

 
#scroller ul { 
 
    padding: 0; 
 
    position: relative; 
 
    display:flex;/* UPDATE */ 
 
} 
 

 
#scroller li { 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.circle { 
 
    width: 250px; 
 
    height: 250px; 
 
    position: relative; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    border-radius: 50%; 
 
    background-color:transparent; 
 
    border-style:solid; 
 
    border-width:9px; 
 
    border-color:#006850; 
 
} 
 

 
.circle-text { 
 
    color: #1f497d; 
 
    font-family:Verdana; 
 
    font-size: 20.5px; 
 
    text-align: center; 
 
    width: 200px; 
 
    top: 90px; 
 
    left: 10%; 
 
    bottom: 0; 
 
    position: absolute; 
 
    z-index: 99; 
 
} 
 

 
.arrow { 
 
    width:300px; 
 
    height:80px; 
 
} 
 

 
.flipimage { 
 
    width:300px; 
 
    height:80px; 
 
    -moz-transform: scaleY(-1); 
 
    -webkit-transform: scaleY(-1); 
 
    -o-transform: scaleY(-1); 
 
    transform: scaleY(-1); 
 
    -ms-filter: fliph; /*IE*/ 
 
    filter: fliph; /*IE*/ 
 
} 
 

 
/* UPDATE for animation */ 
 
ul { 
 
    animation: slidli 9s infinite linear; 
 
} 
 
ul:hover { 
 
    animation-play-state:paused; 
 
} 
 
@keyframes slidli { 
 
    100% { 
 
    transform:translatex(-133.5%);/* this is to be update to the content with to see every element slide once untill copies/clone comes back at same spot */ 
 
    } 
 
}
<div class="everything"> 
 
    <div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;"> 
 
    <div class="innerScrollArea"> 
 
     <ul> 
 
     <li> 
 
      <br style="line-height:89px;" /> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       HR Connect<br/>Service<br/>Representative 
 
      </div> 
 
      </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
     </li> 
 
     <li> 
 
      <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Specialist 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <br style="line-height:89px;" /> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Manager 
 
      </div> 
 
      </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
     </li> 
 
     <li> 
 
      <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Director, Employee<br/>Relations &<br/>Well-Being 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <!-- from here it is a copy of the previous elements . 3 of them might have been enough --> 
 
     
 
     <li> 
 
      <br style="line-height:89px;" /> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       HR Connect<br/>Service<br/>Representative 
 
      </div> 
 
      </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
     </li> 
 
     <li> 
 
      <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Specialist 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <br style="line-height:89px;" /> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Employee<br/>Relations<br/>Manager 
 
      </div> 
 
      </div> 
 
      <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
     </li> 
 
     <li> 
 
      <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png"> 
 
      <div class="circle"> 
 
      <div class="circle-text"> 
 
       Director, Employee<br/>Relations &<br/>Well-Being 
 
      </div> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</div>

注意: Iフレックスモデルを使用し、絶対positionningをdroppped。あなたがそれを必要とするならば、主な親は絶対的になることができます、子供はしません。

+0

恐ろしい仲間、歓声! –

関連する問題