Text slider with script style

Text slider with script style

<style>

#carousel {
position: relative;
width: 100%;
margin-bottom: 30%;
margin-left: 0;
margin-right: 0;
background: #FFFFFF;
height: 155px;
}

#slides {
overflow: hidden;
position: relative;
width: 100%;
height: 250px;
margin-bottom: -70%;
}

#slides ul {
list-style: none;
width: 100%;
height: 250px;
margin: 0;
padding: 0;
position: relative;
}

#slides li {
width: 100%;
height: 250px;
float: left;
text-align: center;
position: relative;
font-family: lato, sans-serif;
}

#slides H1 {
font-size: 22px;
padding-top: 0px;
text-align: center;
font-weight: normal;
}

/* Styling for prev and next buttons */

.btn-bar {
width: 60%;
margin: 0 auto;
display: block;
position: relative;
top: 40px;
}

#buttons {
padding: 0 0 5px 0;
float: right;
}

#buttons a {
text-align: center;
display: block;
font-size: 50px;
float: left;
outline: 0;
margin: 0 60px;
color: #b14943;
text-decoration: none;
display: block;
padding: 9px;
width: 35px;
}

a#prev:hover,
a#next:hover {
color: #FFF;
text-shadow: .5px 0px #b14943;
}

.quote-phrase,
.quote-author {
font-family: sans-serif;
font-weight: 300;
display: table-cell;
vertical-align: middle;
padding: 5px 20px;
font-family: 'Lato', Calibri, Arial, sans-serif;
}

.quote-phrase {
height: 60px;
font-size: 12px;
color: black;
font-style: italic;
line-height: 1;
}

.quote-marks {
font-size: 15px;
padding: 0 3px 3px;
position: inherit;
}

.quote-author {
font-style: normal;
font-size: 20px;
color: #b14943;
font-weight: 400;
height: 30px;
}

.quoteContainer {
display: table;
width: 100%;
}

@media screen and (min-width: 767px) {
#carousel {
position: relative;
width: 80%;
background: #FFFFFF;
margin: auto;
height: 185px;

}

#slides {
overflow: hidden;
position: relative;
width: 100%;
height: 250px;
margin-bottom: 0%;
}

#slides ul {
list-style: none;
width: 100%;
height: 250px;
margin: 0;
padding: 0;
position: relative;
}

#slides li {
width: 100%;
height: 250px;
float: left;
text-align: center;
position: relative;
font-family: lato, sans-serif;
}

#slides H1 {
font-size: 39px;
padding-top: 25px;
text-align: center;
font-weight: normal;
margin-bottom: -40px;
}

/* Styling for prev and next buttons */

.btn-bar {
width: 60%;
margin: 0 auto;
display: block;
position: relative;
top: 40px;
}

#buttons {
padding: 0 0 5px 0;
float: right;
}

#buttons a {
text-align: center;
display: block;
font-size: 50px;
float: left;
outline: 0;
margin: 0 60px;
color: #b14943;
text-decoration: none;
display: block;
padding: 9px;
width: 35px;
}

a#prev:hover,
a#next:hover {
color: #FFF;
text-shadow: .5px 0px #b14943;
}

.quote-phrase,
.quote-author {
font-family: sans-serif;
font-weight: 300;
display: table-cell;
vertical-align: middle;
padding: 5px 20px;
font-family: 'Lato', Calibri, Arial, sans-serif;
}

.quote-phrase {
height: 200px;
font-size: 24px;
color: black;
font-style: italic;
line-height: 1;
}

.quote-marks {
font-size: 30px;
padding: 0 3px 3px;
position: inherit;
}

.quote-author {
font-style: normal;
font-size: 20px;
color: #b14943;
font-weight: 400;
height: 30px;
}

.quoteContainer {
display: table;
width: 100%;
}
}

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {

#carousel {
position: relative;
width: 100%;
background: #FFFFFF;
margin: auto;
height: 185px;

}

#slides {
overflow: hidden;
position: relative;
width: 100%;
height: 250px;
margin-bottom: 0%;
}

#slides ul {
list-style: none;
width: 100%;
height: 250px;
margin: 0;
padding: 0;
position: relative;
}

#slides li {
width: 100%;
height: 250px;
float: left;
text-align: center;
position: relative;
font-family: lato, sans-serif;
}

#slides H1 {
font-size: 39px;
padding-top: 25px;
text-align: center;
font-weight: normal;
}

/* Styling for prev and next buttons */

.btn-bar {
width: 60%;
margin: 0 auto;
display: block;
position: relative;
top: 40px;
}

#buttons {
padding: 0 0 5px 0;
float: right;
}

#buttons a {
text-align: center;
display: block;
font-size: 50px;
float: left;
outline: 0;
margin: 0 60px;
color: #b14943;
text-decoration: none;
display: block;
padding: 9px;
width: 35px;
}

a#prev:hover,
a#next:hover {
color: #FFF;
text-shadow: .5px 0px #b14943;
}

.quote-phrase,
.quote-author {
font-family: sans-serif;
font-weight: 300;
display: table-cell;
vertical-align: middle;
padding: 5px 20px;
font-family: 'Lato', Calibri, Arial, sans-serif;
}

.quote-phrase {
height: 200px;
font-size: 24px;
color: black;
font-style: italic;
line-height: 1;
}

.quote-marks {
font-size: 30px;
padding: 0 3px 3px;
position: inherit;
}

.quote-author {
font-style: normal;
font-size: 20px;
color: #b14943;
font-weight: 400;
height: 30px;
}

.quoteContainer {
display: table;
width: 100%;
}
}
</style>


<div>
<div class="btn-bar">
<div id="buttons"><a id="prev" href="#"></a><a id="next" href="#"></a> </div>
</div>

<div id="slides">
<H1>YOUR TEXT</H1>

<ul>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"><span class="quote-marks">"</span> A great resort which looks like it's going to get better. Great rooms, very clean, very modern and friendly staff. Also great value for money. We will return. <span class="quote-marks">"</span><br>-Sean, April 2016 </p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"><span class="quote-marks"></span> Perfect position, great rooms appointed well, caring helpful staff especially Michael! Priced right and the pools are magnificent. We will be back. <span class="quote-marks">"</span><br>-Nicole, September 2016 </p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"><span class="quote-marks">"</span>We have stay here many times. Lovely clean rooms. Staff very friendly. Grounds well kept and the pools. We be back again on my next holiday in darwin. <span class="quote-marks">"</span><br>-Jo, September 2016 </p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"><span class="quote-marks">"</span>Totally brilliant, facility's outstanding, staff fantastic, pool magic. Pool side villas are absolute dream to stay in. We stayed a month and wished for more. Coming back for sure.<span class="quote-marks">"</span><br> -Jud, July 2016 </p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"><span class="quote-marks">"</span>Absolutely loved it! Very affordable, clean rooms, friendly staffs. We held my Son's 5th birthday party at the BBQ area. Pool is massive.

I would highly recommend this resort. <span class="quote-marks">"</span><br>-Rosa, June 2016 </p>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
//rotation speed and timer
var speed = 3000;

var run = setInterval(rotate, speed);
var slides = $('.slide');
var container = $('#slides ul');
var elm = container.find(':first-child').prop("tagName");
var item_width = container.width();
var previous = 'prev'; //id of previous button
var next = 'next'; //id of next button
slides.width(item_width); //set the slides to the correct pixel width
container.parent().width(item_width);
container.width(slides.length * item_width); //set the slides container to the correct total width
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();

//if user clicked on prev button

$('#buttons a').click(function (e) {
//slide the item

if (container.is(':animated')) {
return false;
}
if (e.target.id == previous) {
container.stop().animate({
'left': 0
}, 1500, function () {
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
});
}

if (e.target.id == next) {
container.stop().animate({
'left': item_width * -2
}, 1500, function () {
container.find(elm + ':last').after(container.find(elm + ':first'));
resetSlides();
});
}

//cancel the link behavior
return false;

});

//if mouse hover, pause the auto rotation, otherwise rotate it
container.parent().mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});

function resetSlides() {
//and adjust the container so current is in the frame
container.css({
'left': -1 * item_width
});
}

});
//a simple function to click next link
//a timer will call this function, and the rotation will begin

function rotate() {
$('#next').click();
}
</script>

Comments