Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  ClosedNew TopicNew Poll

 Owl Carousel (Jquery) Install Issue [SOLVED]
#
I am new to jquery so I'm not sure what I'm doing wrong.

I'd like to embed an Owl Carousel (site here, install instructions here) into posts and/or the forum rules boxes. So far, I've been playing with the forum rules sections and I'm stumped. I've been testing here. I've uploaded the .css and .js files to the files manager.

Any help would be appreciated!


I'm using this code:

CODE

<head>
<link rel="stylesheet" href="http://files.jcink.net/uploads/korshare/owl/owl_carousel_min.css">
<link rel="stylesheet" href="http://files.jcink.net/uploads/korshare/owl/owl_theme_default_min.css">
</head>

<body>

<div id="testcarousel" class="owl-carousel owl-theme">
 <div> <a href="/index.php?showtopic=356" target="_blank"><img src="https://images.imgbox.com/b5/01/v5aV5AIB_o.jpg" style= "height:179.02px; width:137.39px;"/></a> </div>
 <div> <a href="/index.php?showtopic=96" target="_blank"><img src="https://images.imgbox.com/5d/23/4Vg3hJKV_o.jpg" style= "height:179.02px; width:137.39px;"/></a> </div>
 <div>  <a href="/index.php?showtopic=575" target="_blank"><img src="https://images.imgbox.com/61/11/5uMU66Pg_o.jpg" style= "height:179.02px; width:137.39px;"/></a></div>
 <div> <a href="/index.php?showtopic=279" target="_blank"><img src="https://images.imgbox.com/00/eb/sS5rnPc3_o.jpg" style= "height:179.02px; width:137.39px;"/></a> </div>
 <div> <a href="/index.php?showtopic=333" target="_blank"><img src="https://images.imgbox.com/26/0b/supVfpjI_o.jpg" style= "height:179.02px; width:137.39px;"/></a> </div>
 <div> <a href="/index.php?showtopic=316" target="_blank"><img src="https://images.imgbox.com/09/de/0eKjyzMT_o.jpg" style= "height:179.02px; width:137.39px;"/></a> </div>
 <div> <a href="/index.php?showtopic=47" target="_blank"><img src="https://images.imgbox.com/e7/3c/WOX7CLLH_o.jpg" style= "height:179.02px; width:137.39px;"/></a> </div>
</div>

<script src="jquery.min.js"></script>
<script src="http://files.jcink.net/uploads/korshare/owl/owl_carousel_min.js"></script>

<script>
$(document).ready(function(){
 $(#testcarousel).owlCarousel();
});

var owl = $('.owl-carousel');
owl.owlCarousel({
   loop:true,
   nav:true,
   margin:10,
   responsive:{
       0:{
           items:1
       },
       600:{
           items:3
       },            
       960:{
           items:5
       },
       1200:{
           items:6
       }
   }
});
owl.on('mousewheel', '.owl-stage', function (e) {
   if (e.deltaY>0) {
       owl.trigger('next.owl');
   } else {
       owl.trigger('prev.owl');
   }
   e.preventDefault();
});

</script>
</body>
PM
#
I've finally figured this out. Turns out the problem was with the links I was using to call the .css and .js files. I found links to the same files hosted elsewhere and now it works perfectly.

John, you can close this topic if you'd like. Thank you!
PM
#
This topic has been solved. If you need anymore help please post a new thread. Thanks for choosing Jcink services.

signature
email: admin@jcink.com :: blog: John C.
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options ClosedNew TopicNew Poll