[英]i am struggling to Make my slideshow responsive
I hope you are all well on this fine day. 希望您今天过得愉快。 I have made a slideshow but it is not responsive at this time, ie not shrinking down on smaller browser window. 我已经制作了一个幻灯片,但是目前没有响应,即在较小的浏览器窗口上没有缩小。
It is because of my height and width declarations in the css but when I change them to percentages it stops my slideshow from working. 这是因为我在CSS中声明了高度和宽度,但是当我将它们更改为百分比时,它将停止我的幻灯片播放。 Any hints or tips anyone can offer would be gratefully received. 任何人都可以提供的任何提示或技巧将不胜感激。
My html: 我的html:
<div id="slideShow">
<div id="slideShowWindow">
<div class="slide">
<img src="../Images/golden.jpg"/>
<div class="slideText">
<h2>Golden pearl</h2>
<p>This golden pearl came from a farm in the south china sea</p>
</div> <!-- </slideText> -->
</div>
<!-- </slide> repeat as many times as needed -->
<div class="slide">
<img src="../Images/zen.jpg"/>
<div class="slideText">
<h2>Simply Zen</h2>
<p>What else is there to say?!</p>
</div> <!-- </slideText> -->
</div>
<!-- </slide> repeat as many times as needed -->
<div class="slide">
<img src="../Images/rain.jpg"/>
<div class="slideText">
<h2>Lariat In 'Rain'</h2>
<p>Lariat In 'Rain' motif using diamonds, white gold, Tahitian pearls, and silk.</p>
</div> <!-- </slideText> -->
</div>
<!-- </slide> repeat as many times as needed -->
</div> <!-- </slideShowWindow> -->
</div> <!-- </slideshow> -->
My css: 我的CSS:
img {
display: block;
width: 100%;
height: auto;
}
p{
background:none;
color:#ffffff;
}
#slideShow #slideShowWindow {
width: 650px;
height: 450px;
margin: 0;
padding: 0;
position: relative;
overflow:hidden;
margin-left: auto;
margin-right:auto;
}
#slideShow #slideShowWindow .slide {
margin: 0;
padding: 0;
width: 650px;
height: 450px;
float: left;
position: relative;
margin-left:auto;
margin-right: auto;
}
#slideshow #slideshowWindow .slide{
position:absolute;
bottom:18px;
left:0;
width:100%;
height:auto;
margin:0;
padding:0;
color:#ffffff;
font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}
.slideText {
background: rgba(128, 128, 128, 0.49);
text-align:center;
bottom:0;
padding:10px;
}
#slideshow #slideshowWindow .slide .slideText h2,
#slideshow #slideshowWindow .slide .slideText p {
margin:10px;
padding:15px;
}
.slideNav {
display: block;
text-indent: -10000px;
position: absolute;
cursor: pointer;
}
#leftNav {
left: 0;
bottom: 0;
width: 48px;
height: 48px;
background-image: url("../Images/plus_add_minus.png");
background-repeat: no-repeat;
z-index: 10;
}
#rightNav {
right: 0;
bottom: 0;
width: 48px;
height: 48px;
background-image: url("../Images/plus_add_green.png");
background-repeat: no-repeat;
z-index: 10;
}
.hiding{
display:none;
}
.showing{
display:block;
}
My jQuery: 我的jQuery:
$(document).ready(function () {
var currentPosition = 0;
var slides = $('.slide');
var slideWidth = 650;
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;
//Assign a timer, so it will run periodically
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>');
slides.css({ 'float': 'left' });
//set #slidesHolder width equal to the total width of all the slides
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
$('#slideShowWindow')
.prepend('<span class="slideNav" id="leftNav">Move Left</span>')
.append('<span class="slideNav" id="rightNav">Move Right</span>');
manageNav(currentPosition);
//tell the buttons what to do when clicked
$('.slideNav').bind('click', function () {
//determine new position
currentPosition = ($(this).attr('id') === 'rightNav')
? currentPosition + 1 : currentPosition - 1;
//hide/show controls
manageNav(currentPosition);
clearInterval(slideShowInterval);
slideShowInterval = setInterval(changePosition, speed);
moveSlide();
});
function manageNav(position) {
//hide left arrow if position is first slide
if (position === 0) {
$('#leftNav').hide();
}
else {
$('#leftNav').show();
}
//hide right arrow is slide position is last slide
if (position === numberOfSlides - 1) {
$('#rightNav').hide();
}
else {
$('#rightNav').show();
}
}
//changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
function changePosition() {
if (currentPosition === numberOfSlides - 1) {
currentPosition = 0;
manageNav(currentPosition);
} else {
currentPosition++;
manageNav(currentPosition);
}
moveSlide();
}
//moveSlide: this function moves the slide
function moveSlide() {
$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
}
});
Thanks in advanced for your help guys, if you have any questions or require further info let me know :) 非常感谢您的帮助,如果您有任何疑问或需要进一步的信息,请告诉我:)
You can achieve a responsive slideshow much easier by just using a bootstrap carousel. 只需使用自举轮播,您就可以更轻松地实现自适应幻灯片播放。 You will need to add the following into your <head>
tag in order to use bootstrap: 您需要将以下内容添加到您的<head>
标记中才能使用引导程序:
<!-- Bootstrap stylesheets and links -->
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- End of required Bootstrap stylesheets and links -->
And then use something like this for your carousel: 然后为您的轮播使用以下代码:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.