HTML- Owl Carousel Watch

QuimmyLong
Badges: 2
Rep:
?
#1
Report Thread starter 4 weeks ago
#1
So I need some help understanding how owl carousels work. I’d like to use one in my commuting project to create a calendar but as we’ve not had any lessons teaching us html, I’ve been learning it by myself and I think that I’d want to use the owl. If anyone can help me understand it I would be incredibly grateful!!!
Posted on the TSR App. Download from Apple or Google Play
0
reply
winterscoming
Badges: 19
Rep:
?
#2
Report 4 weeks ago
#2
Do you mean this javascript library called Owl carousel? https://owlcarousel2.github.io/OwlCarousel2/ It looks like their site explains how to get started and has some examples on how to use it.

It's got a tag on stackoverflow as well which should be good for more examples: https://stackoverflow.com/questions/tagged/owl-carousel
Last edited by winterscoming; 4 weeks ago
0
reply
QuimmyLong
Badges: 2
Rep:
?
#3
Report Thread starter 4 weeks ago
#3
Okay so I’ve never used jquery before and I think that’s where I’m getting stuck
Posted on the TSR App. Download from Apple or Google Play
0
reply
winterscoming
Badges: 19
Rep:
?
#4
Report 4 weeks ago
#4
(Original post by QuimmyLong)
Okay so I’ve never used jquery before and I think that’s where I’m getting stuck
Have you done any 'plain' JavaScript? At least enough to be comfortable with the basic syntax and structure? That's pretty important for web development. If not I'd strongly recommend spending some time learning the basics of that.

It doesn't look like you need to really know a lot about JQuery -- as far as I can tell the only thing you really need to do is paste in the examples from the documentation. All it does is use JQuery to grab the HTML element which is going to host the carousel (a <div>), and then the rest is just a case of setting some options which are all described in the documentation.

As far as JQuery is concerned, you probably only need to know two things that I can see from the docs:

1) it uses the class="owl-carousel owl-theme" attribute in HTML to apply the carousel style to a <div> element on the page that contains your actual carousel items (which are also <div> elements inside the carousel). e.g.:
Code:
<div class="owl-carousel owl-theme">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
</div>
2) it uses the JQuery 'class selector' to pick up the outer carousel element by selecting the class name "owl-carousel". (the dot prefix notation means it's a class. i.e. $(".owl-carousel") in JQuery simply means 'select the first element on the page with a class of "owl-carousel").

The script is in the HTML footer inside script tags, to be run when the HTML document is loaded by the browser:
Code:
$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});
the $(document).ready() stuff just ensures the owl carousel script doesn't run until the browser has finished loading the page (if the browser runs it before the page has fully loaded then the script could run before the page has been displayed, and then it won't work, so that part is important).

Here's a very simple example i've thrown together by copy+pasting the code from their documentation: https://jsfiddle.net/e7fbpd0n/

(I linked to the owl js and css from a public CDN, which I'd suggest doing instead of fussing around downloading the files because it's easier).
Last edited by winterscoming; 4 weeks ago
2
reply
X

Quick Reply

Attached files
Write a reply...
Reply
new posts

All the exam results help you need

777

people online now

225,530

students helped last year

Do you have grade requirements for your sixth form/college?

At least 5 GCSEs at grade 4 (65)
14.41%
At least 5 GCSEs at grade 5 (70)
15.52%
At least 5 GCSEs at grade 6 (86)
19.07%
Higher than 5 GCSEs at grade 6 (181)
40.13%
Pass in English and Maths GCSE (21)
4.66%
No particular grades needed (28)
6.21%

Watched Threads

View All