具有自定义分页的 div 滑块

Question

我需要开发一个像这样的滑块/轮播，你可以在网站上看到example

我粘贴了代码并试图研究它，但是我迷失了脚本并且没有加载 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" >
	<div class="slider-item__wrap" data-item-count="" >
		
			<div class="slide current" >
				<article class="model-item">
					<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;);">
						
						<div class="model-item__row">
							<div class="color--light model__content left">
								<h2 class="content__title">
									DYNAMISM
								</h2>
								<div class="content__text">
									<span class="animated-line"></span>
									<p>CREATED TO MASTER THE ROAD</p>



								</div>
								<div class="content__descr">
									<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>

								</div>
							</div>
						</div>
					</div>
				</article>
			</div>
		
			<div class="slide" >
				<article class="model-item">
					<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;);">
						
						<div class="model-item__row">
							<div class="color--light model__content left">
								<h2 class="content__title">
									Alfa D.N.A.
								</h2>
								<div class="content__text">
									<span class="animated-line"></span>
									<p>DYNAMIC CONTROL</p>

								</div>
								<div class="content__descr">
									<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>		
									
								</div>
							</div>
						</div>
					</div>
				</article>
			</div>
		
			<div class="slide">
				<article class="model-item">
					<div class="model-item__col pos-bottom-left js-responsive-image" style="background-image:url(images/models/giulietta/dynamism_modelapge-newgiulietta.jpg);">
						
						<div class="model-item__row">
							<div class=" model__content pos--right">
								<h2 class="content__title">
									SUSPENSION
								</h2>
								<div class="content__text">
									<span class="animated-line"></span>
									<p>FEEL THE ROAD</p>
								</div>
								<div class="content__descr">
									<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>
								</div>
							</div>
						</div>
					</div>
				</article>
			</div>
	</div>
	<!-- END contenitore elemento con scroll orizzontale -->
	<!-- START Menu per scroll orrizzontale -->
	<div class="slider-menu">
		<ul class="slider-menu__items">
			<li class="active" data-adobe="content::dynamism">
				DYNAMISM
			</li>
			<li data-adobe="content::alfadna">
				Alfa D.N.A.
			</li>
			<li data-adobe="content::suspension">
				SUSPENSION
			</li>
		</ul>
	</div>
	<!-- END Menu per scroll orrizzontale -->
	<!-- START pulsanti di avanzamento alla slide successiva nel data target deve esser contenuto il data-ancor-target della slide successiva -->
	<div class="mobile-next-navigation" data-target="efficiency">EFFICIENCY</div>
	<!-- END pulsanti di avanzamento alla slide successiva -->
</div>
</div>

Answer 1

请查看此链接：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
  });
});