Netflix风格的图像连续轮播鼠标悬停与Bootstrap支持

有人可以建议任何Twitter Bootstrap支持jQuery插件，可以提供Netflix风格不断滚动鼠标悬停的图像轮播？我已经探索了Bootstrap JS库中提供的旋转木马，但它需要单击按钮，并且不会连续滚动，而只是滚动项目下的全套图像。Netflix风格的图像连续轮播鼠标悬停与Bootstrap支持

这样凉爽插件的任何信息，非常感谢

来源

2014-10-08 user2818257

虽然不是引导基础/ jQuery的，但更重要的（纯CSS！），我碰到one这是一个不错的地方开始的，并延长来到

HTML：

<div class="contain"> 

    <h1>Pure CSS Netflix Video Carousel</h1> 

    <p> 
    Inspired by <a href="https://twitter.com/Eli_White">Eli White's</a> article <a href="http://eng.wealthfront.com/2015/06/implementing-netflix-redesign.html">Performant CSS Animations: Netflix Case Study</a>, his <a href="https://codepen.io/TheSavior/pen/LVeYBp">example pen</a>, and <a href="http://matthewjamestaylor.com/">Matt Taylor's</a> <a href="https://codepen.io/mattjamestaylor/pen/dodYPr">CSS-only version.</a> 
    </p> 

    <div class="row"> 
    <div class="row__inner"> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-2.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-3.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-4.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-5.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-6.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-7.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-8.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-9.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-10.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-11.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-12.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-13.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-14.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-15.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-16.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-17.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-19.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

    </div> 
    </div> 

</div>

CSS：

body, 
html { 
    padding: 0 10px; 
    margin: 0; 
    background: #0e0f11; 
    color: #ecf0f1; 
    font-family: 'Open Sans', sans-serif; 
    min-height: 100vh; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
     -ms-flex-direction: row; 
      flex-direction: row; 
    -webkit-box-align: center; 
     -ms-flex-align: center; 
      align-items: center; 
    width: 100%; 
} 
* { 
    -webkit-box-sizing: border-box; 
      box-sizing: border-box; 
} 
h1, 
p { 
    text-align: center; 
} 
p { 
    width: 100%; 
    max-width: 500px; 
    margin: auto; 
} 
a:link, 
a:hover, 
a:active, 
a:visited { 
    -webkit-transition: color 150ms; 
    transition: color 150ms; 
    color: #95a5a6; 
    text-decoration: none; 
} 
a:hover { 
    color: #7f8c8d; 
    text-decoration: underline; 
} 
.contain { 
    width: 100%; 
} 
.row { 
    overflow: scroll; 
    width: 100%; 
} 
.row__inner { 
    -webkit-transition: 450ms -webkit-transform; 
    transition: 450ms -webkit-transform; 
    transition: 450ms transform; 
    transition: 450ms transform, 450ms -webkit-transform; 
    font-size: 0; 
    white-space: nowrap; 
    margin: 70.3125px 0; 
    padding-bottom: 10px; 
} 
.tile { 
    position: relative; 
    display: inline-block; 
    width: 250px; 
    height: 140.625px; 
    margin-right: 10px; 
    font-size: 20px; 
    cursor: pointer; 
    -webkit-transition: 450ms all; 
    transition: 450ms all; 
    -webkit-transform-origin: center left; 
      transform-origin: center left; 
} 
.tile__img { 
    width: 250px; 
    height: 140.625px; 
    -o-object-fit: cover; 
    object-fit: cover; 
} 
.tile__details { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
    font-size: 10px; 
    opacity: 0; 
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0))); 
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); 
    -webkit-transition: 450ms opacity; 
    transition: 450ms opacity; 
} 
.tile__details:after, 
.tile__details:before { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    display: #000; 
} 
.tile__details:after { 
    margin-top: -25px; 
    margin-left: -25px; 
    width: 50px; 
    height: 50px; 
    border: 3px solid #ecf0f1; 
    line-height: 50px; 
    text-align: center; 
    border-radius: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: 1; 
} 
.tile__details:before { 
    content: '▶'; 
    left: 0; 
    width: 100%; 
    font-size: 30px; 
    margin-left: 7px; 
    margin-top: -18px; 
    text-align: center; 
    z-index: 2; 
} 
.tile:hover .tile__details { 
    opacity: 1; 
} 
.tile__title { 
    position: absolute; 
    bottom: 0; 
    padding: 10px; 
} 
.row__inner:hover { 
    -webkit-transform: translate3d(-62.5px, 0, 0); 
      transform: translate3d(-62.5px, 0, 0); 
} 
.row__inner:hover .tile { 
    opacity: 0.3; 
} 
.row__inner:hover .tile:hover { 
    -webkit-transform: scale(1.5); 
      transform: scale(1.5); 
    opacity: 1; 
} 
.tile:hover ~ .tile { 
    -webkit-transform: translate3d(125px, 0, 0); 
      transform: translate3d(125px, 0, 0); 
}

来源

2017-12-25 06:28:54

Netflix风格的图像连续轮播鼠标悬停与Bootstrap支持

回答

相关问题