jQuery Parallax滑块添加其他按钮

时间:2019-02-26 22:38:15

标签: jquery html css slider parallax

我想在现有的Jquery Parallax滑块上添加一个按钮,并且也尝试过。看到滑块时,该按钮不可见,但滑动时可见,但在第一个按钮上重叠。如何相邻添加两个按钮?

https://tympanus.net/Development/ParallaxContentSlider/index2.html,这是我正在处理的模板。

旁边需要一个按钮,以观看更多视频

	
	<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/ParallaxContentSlider/css/demo.css" />
        <link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/ParallaxContentSlider/css/style2.css" />
        <noscript>
			<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/ParallaxContentSlider/css/css/nojs.css" />
		</noscript>
  
  <div id="da-slider" class="da-slider">
				<div class="da-slide">
					<h2>Easy management</h2>
					<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
					<a href="#" class="da-link">Read more</a><a href="#" class="da-link">Watch Video</a>
					<div class="da-img"><img src="images/2.png" alt="image01" /></div>
				</div>
				<div class="da-slide">
					<h2>Revolution</h2>
					<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/3.png" alt="image01" /></div>
				</div>
				<div class="da-slide">
					<h2>Warm welcome</h2>
					<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/1.png" alt="image01" /></div>
				</div>
				<div class="da-slide">
					<h2>Quality Control</h2>
					<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/4.png" alt="image01" /></div>
				</div>
				<nav class="da-arrows">
					<span class="da-arrows-prev"></span>
					<span class="da-arrows-next"></span>
				</nav>
			</div>
        </div>
    
    <script type="text/javascript" src="https://tympanus.net/Development/ParallaxContentSlider/js/modernizr.custom.28468.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://tympanus.net/Development/ParallaxContentSlider/js/jquery.cslider.js"></script>
		<script>
			$(function() {
			
				$('#da-slider').cslider({
					autoplay	: true,
					bgincrement	: 450
				});
			
			});
	</script>
    
    
    

0 个答案:

没有答案