Uncaught TypeError: $(...).owlCarousel is not a function

IPHONE SLIDESHOW not functioning.

index.html:239 Uncaught TypeError: $(...).owlCarousel is not a function
    at index.html:239:14

I researched and tried putting In the head.
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I’m not familar with this, if anyone knows what I need to plug in to get the slideshow to work please assist!!! I’m in slideshow hell.

github page
Iphone slideshow is on the third section.
sorry its not right clickable because of the drag, ctrl shift i please!

here are links: about similar issue
javascript - Uncaught TypeError: $(…).owlCarousel is not a function - Stack Overflow

here is the github document of the library

OwlCarousel2/OwlCarousel2: DEPRECATED jQuery Responsive Carousel. (github.com)

In these situations, it’s better if you share GitHub repo or code snippet instead of live demo, because this is all I can do is share a link or two

Unrelated note, the github of owlCarousel advise using ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes. (github.com)

Edited note: what are you trying to achieve, maybe you don’t need to install a library with the new APIs added to the web?

Hi! Thank you! I did try that first link. I was trying to use what they have arpan codepen, and tweak it, so I would add a gold frame img and just have a simple slideshow but im not getting the results I envisioned. I want to move on give time to grow my skills so I’m not on here asking for help about javascript but unfinished projects are taking up my attention units so I’m trying to finish. github

good mindset,

I will give you ways to do it in css and I will check your github tomorrow, because it’s time for me to sleep :sleeping:

for to control the scroll sliding you can use scroll-snap-type - CSS: Cascading Style Sheets | MDN (mozilla.org)

scroll-snap-type: x mandatory;

but this will make it snap, so to control the distance of the scrolling you add scroll-padding - CSS: Cascading Style Sheets | MDN (mozilla.org)

scroll-snap-type: x mandatory;
scroll-padding: 2em;

but the element still not right, to control its area use scroll-snap-align - CSS: Cascading Style Sheets | MDN (mozilla.org)

scroll-snap-align: start end;

later when you want to dive into javascript you can use this API Element.scrollIntoView() - Web APIs | MDN (mozilla.org)

If you need more help, just answer with any questions you have, and hopefully I will answer them tomorrow.

Edit: of course, if I missed the point, feel free to say so.

owlCarousel isn’t installed correctly in the repo, follow Static HTML Quick Setup guide in NPM. And you will have its features

I think the same can be done to ripples, but I haven’t tried it sorry

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.