的div自定义分页滑块

我需要开发这样的滑块/旋转木马正是你可以看到example在现场的div自定义分页滑块

我粘贴代码，并试图研究它，但我得到的脚本和div的背景丢失没有加载！

简单地说，我需要滑动三个或更多div与自定义分页浮动和每个div被拉伸到浏览器页面的背景图像封面，就像我前面提到的例子。谢谢

@media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4} 
 
.slider-menu>ul,.slider-menu>ul>li{display:inline-block} 
 
.slider-menu>ul{padding:0;font-size:0;width:100%} 
 
.slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center} 
 
.slider-menu>ul>li:first-child{position:relative} 
 
.slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25} 
 
.slider-menu>ul>li:last-child{border-right:0} 
 
.slider-menu>ul>li.active{background-color:#8f0c25;color:#fff} 
 
} 
 
@media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px} 
 
}

<div class="section row-slide"><div class="item--mobile wrap-item isActive inView" data-fx="slide" data-ancor-target="dynamism" > 
 
\t <div class="slider-item__wrap" data-item-count="" > 
 
\t \t 
 
\t \t \t <div class="slide current" > 
 
\t \t \t \t <article class="model-item"> 
 
\t \t \t \t \t <div class="model-item__col pos-bottom-left js-responsive-image" data-src-medium="/content/dam/alfaromeo/global/model/giulietta/tablet/dynamism_modelapge-newgiulietta_medium.jpg" data-src-small="/content/dam/alfaromeo/global/model/giulietta/mobile/dynamism_modelpage-newgiulietta_small.jpg" data-src="/content/dam/alfaromeo/global/model/giulietta/desktop/dynamism_modelapge-newgiulietta.jpg" style=" background-image: url(&quot;/content/dam/alfaromeo/global/model/giulietta/desktop/dynamism_modelapge-newgiulietta.jpg&quot;);"> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <div class="model-item__row"> 
 
\t \t \t \t \t \t \t <div class="color--light model__content left"> 
 
\t \t \t \t \t \t \t \t <h2 class="content__title"> 
 
\t \t \t \t \t \t \t \t \t DYNAMISM 
 
\t \t \t \t \t \t \t \t </h2> 
 
\t \t \t \t \t \t \t \t <div class="content__text"> 
 
\t \t \t \t \t \t \t \t \t <span class="animated-line"></span> 
 
\t \t \t \t \t \t \t \t \t <p>CREATED TO MASTER THE ROAD</p> 
 

 

 

 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t <div class="content__descr"> 
 
\t \t \t \t \t \t \t \t \t <p>Each element of the New Alfa Giulietta has been designed to perfectly balance power and agility for every road condition, achieving extraordinary driving pleasure.&nbsp;</p> 
 

 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </article> 
 
\t \t \t </div> 
 
\t \t 
 
\t \t \t <div class="slide" > 
 
\t \t \t \t <article class="model-item"> 
 
\t \t \t \t \t <div class="model-item__col pos-bottom-left js-responsive-image" data-src-medium="/content/dam/alfaromeo/global/model/giulietta/tablet/dna_modelpage-newgiulietta_medium.jpg" data-src-small="/content/dam/alfaromeo/global/model/giulietta/mobile/dna_modelpage-newgiulietta_small.jpg" data-src="/content/dam/alfaromeo/global/model/giulietta/desktop/dna_modelpage-newgiulietta.jpg" style="height: 544px; background-image: url(&quot;/content/dam/alfaromeo/global/model/giulietta/desktop/dna_modelpage-newgiulietta.jpg&quot;);"> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <div class="model-item__row"> 
 
\t \t \t \t \t \t \t <div class="color--light model__content left"> 
 
\t \t \t \t \t \t \t \t <h2 class="content__title"> 
 
\t \t \t \t \t \t \t \t \t Alfa D.N.A. 
 
\t \t \t \t \t \t \t \t </h2> 
 
\t \t \t \t \t \t \t \t <div class="content__text"> 
 
\t \t \t \t \t \t \t \t \t <span class="animated-line"></span> 
 
\t \t \t \t \t \t \t \t \t <p>DYNAMIC CONTROL</p> 
 

 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t <div class="content__descr"> 
 
\t \t \t \t \t \t \t \t \t <p>The Alfa D.N.A. system is the exclusive Alfa Romeo driving mode selector which adapts the vehicle’s performance to suit the driver’s style and road conditions. There are three modes: Dynamic,&nbsp;for performance,&nbsp;Natural&nbsp;for optimum fuel economy and&nbsp;All-Weather for tackling bad weather and low grip conditions.</p> \t \t 
 
\t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </article> 
 
\t \t \t </div> 
 
\t \t 
 
\t \t \t <div class="slide"> 
 
\t \t \t \t <article class="model-item"> 
 
\t \t \t \t \t <div class="model-item__col pos-bottom-left js-responsive-image" style="background-image:url(images/models/giulietta/dynamism_modelapge-newgiulietta.jpg);"> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <div class="model-item__row"> 
 
\t \t \t \t \t \t \t <div class=" model__content pos--right"> 
 
\t \t \t \t \t \t \t \t <h2 class="content__title"> 
 
\t \t \t \t \t \t \t \t \t SUSPENSION 
 
\t \t \t \t \t \t \t \t </h2> 
 
\t \t \t \t \t \t \t \t <div class="content__text"> 
 
\t \t \t \t \t \t \t \t \t <span class="animated-line"></span> 
 
\t \t \t \t \t \t \t \t \t <p>FEEL THE ROAD</p> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t <div class="content__descr"> 
 
\t \t \t \t \t \t \t \t \t <p>Sporty, fun, yet comfortable: the New Alfa Giulietta is equipped to deliver the authentic Alfa Romeo driving experience. The Macpherson front suspension and Multilink rear suspension have been designed to offer great road holding and a superior level of comfort. This combination offers a truly involving drive with no loss in refinement.</p> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </article> 
 
\t \t \t </div> 
 
\t </div> 
 
\t <!-- END contenitore elemento con scroll orizzontale --> 
 
\t <!-- START Menu per scroll orrizzontale --> 
 
\t <div class="slider-menu"> 
 
\t \t <ul class="slider-menu__items"> 
 
\t \t \t <li class="active" data-adobe="content::dynamism"> 
 
\t \t \t \t DYNAMISM 
 
\t \t \t </li> 
 
\t \t \t <li data-adobe="content::alfadna"> 
 
\t \t \t \t Alfa D.N.A. 
 
\t \t \t </li> 
 
\t \t \t <li data-adobe="content::suspension"> 
 
\t \t \t \t SUSPENSION 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </div> 
 
\t <!-- END Menu per scroll orrizzontale --> 
 
\t <!-- START pulsanti di avanzamento alla slide successiva nel data target deve esser contenuto il data-ancor-target della slide successiva --> 
 
\t <div class="mobile-next-navigation" data-target="efficiency">EFFICIENCY</div> 
 
\t <!-- END pulsanti di avanzamento alla slide successiva --> 
 
</div> 
 
</div>

来源

2016-05-16 Sandy Gubran

您已经为滑块必要的插件？ –

你可以使用cssslider创建一个滑块JQUERY/CSS http://cssslider.com/ – Blind

我做了一个他们的代码的小提琴：背景不加载，但我把完整的路径，所以也许有另一个去调整CSS你自己。起点！ https://jsfiddle.net/RachGal/jazLgwzy/ –

请检查此链接：https://jsfiddle.net/IA7medd/osdLso66/

HTML：

<div id="demo"> 
    <div class="container"> 
    <div class="row"> 
     <div class="span12"> 
     <div id="owl-demo" class="owl-carousel"> 

      <div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div> 
      <div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div> 
      <div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div> 

     </div> 
     </div> 
    </div> 
    </div> 
</div>

的滑块，可以改变其高度的每个项目的风格：

.item{ 
    height:350px; 
    background-position: center center; 
    background-size: cover; 
}

这是滑块的必要的插件：

https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js 
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css 
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css

终于滑块脚本：

$(document).ready(function() { 
    $("#owl-demo").owlCarousel({ 

    navigation : true, 
    slideSpeed : 300, 
    paginationSpeed : 400, 
    singleItem : true 
    }); 
});

来源

2016-05-16 12:59:32

这很简单，但我需要自定义导航不生成的子弹。感谢你的付出。 –

你可以使用CSS自定义导航，我在这里编辑它的风格检查：https://jsfiddle.net/IA7medd/osdLso66/2/ –

非常感谢你，但我需要开发不同链接的自定义导航不只是生成子弹..向下滚动请你会看到例如技术部分，这就是我需要做的 –

的div自定义分页滑块

回答

相关问题