Pierwszy raz próbuje użyć JS'a i generalnie czegokolwiek w robieniu stron poza html/css.
Mam gotowy kod slidera tekstu znaleziony na codepen.
Jest tam użyty Owl Carousel. To był w sumie jedyny element, który trzeba było pobrać i dołożyć tam samemu.
Niestety nijak nie umiem sprawić żeby animacja zaczęła działać. Siedzę czytam próbuje ogarnąć ale nie wiem.
Bardzo proszę wskażcie mi albo naprowadźcie chociaż co zrobiłam źle.
Html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="testcss.css" type="text/css"/>
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">
<script src="testjs.js"></script>
<body>
<div class="owl-carousel">
<div id="carousel">
<div class="btn-bar">
<div id="buttons"><a id="prev" href="#"><</a><a id="next" href="#">></a> </div></div>
<div id="slides">
<ul>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"><span class="quote-marks">"</span> I was literally BLOWN AWAY by Company A's work! They went above and beyond all of our expectations with design, usability. and branding, I will reccommend them to everyone I know!<class="quote-marks">"</span>
</p>
</div>
<div class="authorContainer">
<p class="quote-author">John Doe // Local Business Owner</p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"><span class="quote-marks">"</span>
I could not stop staring! Company A's Web Solutions are by far the most elegant solutions, you can't beat their quality and attention to detail!
<span class="quote-marks">"</span>
</p>
</div>
<div class="authorContainer">
<p class="quote-author">Andy Fakename // CEO: Andy's Camping Supplies</p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"><span class="quote-marks">"</span>Carl Fakeguy, was the most helpful designer I've ever hired. He listened to my ideas and advised against things that could negatively affect my CEO. Company A is by far the most generous and helpful company, 5/5!<span class="quote-marks">"</span>
</p>
</div>
<div class="authorContainer">
<p class="quote-author">Janice Falsename</p>
</div>
</li>
</ul>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="owl.carousel.min.js"></script>
</body>
</html>
CSS
body{
background:#E96D65;
}
#carousel {
position: relative;
width:60%;
margin:0 auto;
}
#slides {
overflow: hidden;
position: relative;
width: 100%;
height: 250px;
}
#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;
}
/* Styling for prev and next buttons */
.btn-bar{
max-width: 346px;
margin: 0 auto;
display: block;
position: relative;
top: 40px;
width: 100%;
}
#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:#FFF;
font-style:italic;
text-shadow:.5px 0px #b14943;
}
.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, .authorContainer {
display: table;
width: 100%;
}
JS
$(document).ready(function () {
$(".owl-carousel").owlCarousel();
//rotation speed and timer
var speed = 5000;
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();
}
