Shopify Carousels, Owl, Slider, ResponsiveSlides
Please can someone help I have tried to implement 3 kinds of carousels and nothing is working:
http://owlgraphic.com/owlcarousel/
Nothing works, I have added the JS and CSS like this:
<!-- CSS ================================================== -->
{{ 'timber.scss.css' | asset_url | stylesheet_tag }}
{{ 'theme.scss.css' | asset_url | stylesheet_tag }}
{{ 'index.css' | asset_url | stylesheet_tag }}
{{ 'owl.css' | asset_url | stylesheet_tag }}
{{ 'scoot-baby.css' | asset_url | stylesheet_tag }}
<!-- JS ================================================== -->
{{ 'jquery-1.9.1.min.js' | asset_url | script_tag }}
{{ 'owl.carousel.js' | asset_url | script_tag }}
Then the html with the JS on the home page like this:
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img src="https://cdn.shopify.com/s/files/1/1334/7245/t/1/assets/fullimage1.jpg?15259394755119812233" alt="The Last of us"></div>
<div class="item"><img src="https://cdn.shopify.com/s/files/1/1334/7245/t/1/assets/fullimage2.jpg?15259394755119812233" alt="GTA V"></div>
<div class="item"><img src="https://cdn.shopify.com/s/files/1/1334/7245/t/1/assets/fullimage3.jpg?15259394755119812233" alt="Mirror Edge"></div>
</div>
<style>
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</style>
<script>
jQuery.noConflict();
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem : true
// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false
});
});
</script>
Nothing works nothing, i found this on stackoverflow
Owl Carousel: Javascript won't load. Shopify Issue or Code Issue?
Nothing works so i found this on the shopify forum
https://ecommerce.shopify.com/c/ecommerce-design/t/how-to-use-owl-carousel-for-blog-355756
Nothing works, please can someone help?
Thanks
Answer
jQuery uses the $
sign as a shortcut for jQuery.
What if other JavaScript frameworks (Angular, Backbone, etc) also use the $
sign as a shortcut? If two different frameworks are using the same shortcut, one of them might stop working.
The jQuery team have already thought about this, and implemented the noConflict()
method. The noConflict()
method releases the hold on the $
shortcut identifier, so that other scripts can use it.
You can of course still use jQuery, simply by writing the full name instead of the shortcut.
So either Remove jQuery.noConflict();
from your JavaScript. Or if you really need to use it, change
$(document).ready(function() {
$("#owl-demo").owlCarousel({
to
jQuery(document).ready(function() {
jQuery("#owl-demo").owlCarousel({
Related Questions
- → Does anyone know how to solve IP canonicalization with shopify platform?
- → How can I add a featured image from a blog post to my homepage on shopify
- → Shopify - Get list of product from a specific collection
- → Shopify webhooks not wanted
- → Comparing two large files are taking over four hours
- → Need "add to cart" button price to update with correct amount depending on what checkbox is checked
- → How to append a variable inside another vaiable name in liquid html
- → GET /admin/webhooks.json returns an empty array
- → Javascript function not getting executed properly
- → How to give border to to current displaying border
- → Shopify background image
- → Dynamic Attribute Names in Shopify Cart
- → What after added shopify store into shipstation