的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自定義分頁滑塊

回答

相關問題