5
मुझे lightSlider (http://sachinchoolur.github.io/lightslider/) गैलरी बनाने की आवश्यकता है जहां थंबनेल/आईएसपीजर के बगल में "सभी तस्वीरें दिखाएं" (यदि थंबनेल गिनती है = = 5 शो बटन)।lightSlider थंबनेल के बगल में सभी बटन दिखाएं
मैंने इसे स्थिति से करने की कोशिश की: पूर्ण लेकिन सभी बटन दिखाएं अंतिम थंबनेल पर है।
$('#lightSlider').lightSlider({
gallery: true,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 6
});.demo {
width: 420px;
position: relative;
}
ul {
list-style: none outside none;
padding-left: 0;
margin-bottom: 0;
}
li {
display: block;
float: left;
margin-right: 6px;
cursor: pointer;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.show-all {
width: 80px;
height: auto;
background-color: #eee;
border: 1px #ddd;
float: left;
position: absolute;
right: 0;
bottom: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<div class="demo">
<ul id="lightSlider">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
</li>
</ul>
<!-- show all is not part of thumnail list, but next to it -->
<div class="show-all">
<i class="fa fa-camera" aria-hidden="true"></i>
<span>Show all photos</span>
</div>
</div>पेजर बीच में संरेखित किया जाना चाहिए।
बिट जो आप प्राप्त करने की कोशिश कर रहे हैं उससे उलझन में हैं। यह पहले से ही शानदार दिखता है .. क्या आप चाहते हैं कि 'शो-ऑल' बीच में, पेजर के नीचे या पेजर के बगल में चरम दाएं हो? – Searching
@ खोज I66.tinypic.com/9bd35f.png 'शो-सब' पेजर के बगल में, लेकिन कंटेनर पर नहीं। मुझे 7+ थंबनेल केंद्रित करने में समस्या है और इसके बगल में दिखाएं। – MysteriousNothing
अच्छा .. तो बस लाइब्रेरी को देखें और jsfiddle में कुछ चीजों को आजमाएं, क्या आप इसे देख सकते हैं और मुझे बता सकते हैं कि यह आपकी आवश्यकता से कितनी दूर है http://jsfiddle.net/pe9qnp3y/4/। आपके द्वारा दिखाए गए नमूने, क्या यह बिल्कुल दिखने वाला तरीका है? और वे सभी को दिखाने के बाद क्या होना चाहिए? – Searching