дивов слайдер с пользовательской пагинацией

мне нужно разработать слайдер/карусель, как это точно вы можете увидеть example на сайтедивов слайдер с пользовательской пагинацией

я вставил код и пытался изучить его, но я заблудился со сценариями и фоном DIVS не загружен!

Просто мне нужно раздвинуть три или более 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

Включил вы необходимый плагин для слайдера? –

Вы можете создать слайдер JQUERY/CSS с помощью cssslider 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/ –

Большое вам спасибо, но мне нужно разработать настраиваемую навигацию с другой ссылкой, не только сгенерированной пули .. прокрутите вниз, тогда вы увидите, например, раздел «Технологии», и вот что мне нужно сделать –

дивов слайдер с пользовательской пагинацией

ответ

Смежные вопросы