12
मैंने स्लिम के साथ एक लंबवत कैरोसेल बनाया है। मैंने डिजाइन में कुछ बदलाव किए हैं और सब कुछ काम कर रहा है जैसा कि मैं चाहता था कि जब पहला तत्व कैरोसेल के दृश्य में है। एक समय में मेरे कैरोसेल में 4 आइटम दिखाई दे सकते हैं, लेकिन जब पहला तत्व चार वस्तुओं में से पहला होता है तो कैरोसेल के लेआउट में कुछ गलत होता है।
मेरे यूआरएल है -
http://www.w3karigar.com/mobile/game2/
आप अपनी वेबसाइट पर कोड देख सकते हैं। लेकिन मैं नीचे कुछ को शामिल किया है -
स्लिक वर्टिकल कैरोसेल में जब पहला तत्व दृश्य में है, कैरोसेल का लेआउट बदलता है
$('#games-carousel').slick({
dots: false,
arrows: false,
infinite: true,
speed: 200,
slidesToShow: 4,
vertical: true,
verticalSwiping: true,
swipeToSlide: true
});
$('#games-carousel').slick('setPosition');#games-carousel .item {
display: block;
width: 100%;
height: 70px;
opacity: 0.2;
padding: 1px 0;
transition: all 0.2s ease-in;
transform: translate3d(0,0,0);
}
#games-carousel .item .cover, #games-carousel .item .info {
width: 50%;
float: left;
height: 100%;
max-height: 100%;
overflow: hidden;
}
#games-carousel .item .cover {
padding: 0 7px 0px 5px;
overflow: visible;
}
#games-carousel .item .cover img {
max-height: 100%;
width: auto;
float: right;
box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
#games-carousel .item .info {
padding-left: 7px;
font-size: 11px;
color: #C5ED34;
text-transform: uppercase;
}
#games-carousel .item .info span {
font-size: 14px;
display: block;
line-height: 16px;
color: #ffffff;
}
#games-carousel .item.slick-current + .slick-active {
height: 150px;
opacity: 1;
padding: 5px 0;
}
#games-carousel .item.slick-current + .slick-active .info {
font-size: 17px;
}
#games-carousel .item.slick-current + .slick-active .info span {
font-size: 25px;
line-height: 30px;
}
#games-carousel .item.slick-current + .slick-active .cover img {
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
}
#games-carousel .item.slick-active.slick-current, #games-carousel .item.slick-current + .slick-active + .slick-active {
height: 100px;
opacity: 0.4;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .info, #games-carousel .item.slick-current .info {
font-size: 14px;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .info span, #games-carousel .item.slick-current .info span {
font-size: 18px;
line-height: 22px;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .cover img, #games-carousel .item.slick-current .cover img {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
#games-carousel .item {
display: block;
width: 100%;
height: 70px;
opacity: 0.2;
padding: 1px 0;
transition: all 0.2s ease-in;
transform: translate3d(0,0,0);
}
#games-carousel .item .cover, #games-carousel .item .info {
width: 50%;
float: left;
height: 100%;
max-height: 100%;
overflow: hidden;
}
#games-carousel .item .cover {
padding: 0 7px 0px 5px;
overflow: visible;
}
#games-carousel .item .cover img {
max-height: 100%;
width: auto;
float: right;
box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
#games-carousel .item .info {
padding-left: 7px;
font-size: 11px;
color: #C5ED34;
text-transform: uppercase;
}
#games-carousel .item .info span {
font-size: 14px;
display: block;
line-height: 16px;
color: #ffffff;
}
#games-carousel .item.slick-current + .slick-active {
height: 150px;
opacity: 1;
padding: 5px 0;
}
#games-carousel .item.slick-current + .slick-active .info {
font-size: 17px;
}
#games-carousel .item.slick-current + .slick-active .info span {
font-size: 25px;
line-height: 30px;
}
#games-carousel .item.slick-current + .slick-active .cover img {
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
}
#games-carousel .item.slick-active.slick-current, #games-carousel .item.slick-current + .slick-active + .slick-active {
height: 100px;
opacity: 0.4;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .info, #games-carousel .item.slick-current .info {
font-size: 14px;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .info span, #games-carousel .item.slick-current .info span {
font-size: 18px;
line-height: 22px;
}
#games-carousel .item.slick-current + .slick-active + .slick-active .cover img, #games-carousel .item.slick-current .cover img {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}<div id="games-carousel">
<div class="item adventure">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item adventure">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item adventure">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item adventure">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item lorem">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item lorem">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item lorem">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
<div class="item lorem">
<div class="cover">
<img class="cover-img" src="images/ac3.jpg" alt="" />
</div>
<div class="info">
<span>Assassin's Creed 3</span>Adventure
</div>
</div>
</div>
धन्यवाद, ऊंचाई को हटाने फिक्स बदलता है मुद्दा है, लेकिन मैं एक और विधि द्वारा एक ही प्रभाव को प्राप्त नहीं कर सकता। कृपया मुझे बताएं कि मैं यह कैसे कर सकता हूं। –