Please can someone help I have tried to implement 3 kinds of carousels and nothing is working:
http://owlgraphic.com/owlcarousel/
http://slidesjs.com/
http://responsiveslides.com/
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