JQuery got error: Uncaught Typeerror: $(...).carousel is not a function

New Member
3 0 0

Hi all,

I'm trying to implement Carousel slider in Shopify but I get the error message: Uncaught Typeerror: $(...).carousel is not a function. I've been searching a lot but still no luck. Can you guys help me with this problem?

Thank you so much.

<!doctype html>
<!--[if IE 9]> <html class="ie9 no-js" lang="{{ shop.locale }}"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="{{ shop.locale }}"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="{{ settings.color_button }}">
  <link rel="canonical" href="{{ canonical_url }}">
  {% if settings.favicon != blank %}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
  {% endif %}

  {% capture seo_title %}
    {{ page_title }}
    {% if current_tags %}
      {%- assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags -}}
    {% endif %}
    {% if current_page != 1 %}
      &ndash; {{ 'general.meta.page' | t: page: current_page }}
    {% endif %}
    {% unless page_title contains shop.name %}
      &ndash; {{ shop.name }}
    {% endunless %}
  {% endcapture %}
  <title>{{ seo_title }}</title>

  {% if page_description %}
    <meta name="description" content="{{ page_description | escape }}">
  {% endif %}

  {% include 'social-meta-tags' %}

  {{ '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css' | stylesheet_tag }}
  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
  {{ 'theme_testv2.css' | asset_url | stylesheet_tag }}
  {{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}
  {{ 'jquery.min.js' | asset_url | script_tag }}
  {{ 'bootstrap.min.js' | asset_url | script_tag }}
  {% include 'google-fonts' %}
  {{ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' | stylesheet_tag }}

  <script>
    var theme = {
      strings: {
        addToCart: {{ 'products.product.add_to_cart' | t | json }},
        soldOut: {{ 'products.product.sold_out' | t | json }},
        unavailable: {{ 'products.product.unavailable' | t | json }},
        showMore: {{ 'general.filters.show_more' | t | json }},
        showLess: {{ 'general.filters.show_less' | t | json }}
      },
      moneyFormat: {{ shop.money_format | json }}
    }

    document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
  </script>

  <!--[if (lte IE 9) ]>{{ 'match-media.min.js' | asset_url | script_tag }}<![endif]-->

  {% if template.directory == 'customers' %}
    <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'shopify_common.js' | shopify_asset_url }}"></script><!--<![endif]-->
    <!--[if lte IE 9]><script src="{{ 'shopify_common.js' | shopify_asset_url }}"></script><![endif]-->
  {% endif %}

  <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor.js' | asset_url }}"></script><!--<![endif]-->
  <!--[if lte IE 9]><script src="{{ 'vendor.js' | asset_url }}"></script><![endif]-->
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

  <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.js' | asset_url }}"></script><!--<![endif]-->
  <!--[if lte IE 9]><script src="{{ 'theme.js' | asset_url }}"></script><![endif]-->

  <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'ajax-cart.js' | asset_url }}" ></script><!--<![endif]-->
  <!--[if lte IE 9]><script src="{{ 'ajax-cart.js' | asset_url }}"></script><![endif]-->

  {{ content_for_header }}
</head>

<body class="template-{{ template | split: '.' | first }}">
<script>
window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}
</script>
<button onclick="topFunction()" id="myBtn" title="Go to top"></button>
  <script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

  <div class="drawer drawer--right">
    <div id="CartDrawer">
      <div class="drawer__header">
        <div class="drawer__title h3">{{ 'cart.general.title' | t }}</div>
        <div class="drawer__close drawer__close--right js-drawer-close">
          <button class="drawer__close-button js-cart-nav-toggle">{% include 'icon-close' %}</button>
        </div>
      </div>
      <div id="CartContainer"></div>
    </div>
  </div>

  <a class="in-page-link visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>

  <div class="main-header-container is-moved-by-drawer">
    {% section 'header' %}
  </div>
  <div class="page-container is-moved-by-drawer" id="PageContainer">

    <main class="main-content" id="MainContent" role="main">{{ content_for_layout }}</main>

    {% section 'footer' %}
  </div>

  {% include 'ajax-cart-template' %}
  
</body>
</html>

 

{% layout 'theme.brand' %}

<div class="page-container1">
<div style="max-width: 1280px; margin: 0 auto; position: relative; overflow: auto;">
  <div class="col-md-6 col-md-offset-3">
      <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
        <div class="item active">
          <div class="col-md-4 col3" style="background-image: url('{{ 'Slider1_test.jpg' | file_img_url: '2048x' }}');">
              <a class="overlay" href="#" id="signaturelink">
                <img src="https://cdn.shopify.com/s/files/1/1759/2603/files/ronbow-logo_200x_test.png?9475401765639261264">
                <hr>
                <p>Unleash your inner designer with Ronbow Signature's ultra-contemporary and cutting edge styles.</p>
              </a>
          </div>
        </div>
         <div class="item">
          <div class="col-md-4 col3" style="background-image: url('{{ 'Slider2_test.jpg' | file_img_url: '2048x' }}');">
              <a class="overlay" href="#" id="ronbowlink">
                <img src="https://cdn.shopify.com/s/files/1/1759/2603/files/ronbow-logo_200x_test.png?9475401765639261264">
                <hr>
                <p>From timeless classics to contemporary pieces, Ronbow caters to every lifestyle.</p>
              </a>
          </div>
        </div>
        <div class="item">
          <div class="col-md-4 col3" style="background-image: url('{{ 'Slider3_test.jpg' | file_img_url: '2048x' }}');">
              <a class="overlay" href="#" id="essentialslink">
                <img src="https://cdn.shopify.com/s/files/1/1759/2603/files/ronbow-logo_200x_test.png?9475401765639261264">
                <hr>
                <p>Create a stylish bathroom with quality and design with our Essentials line from the brand you trust.</p>
              </a>
          </div>
      </div>
    </div>
    </div>
</div>
</div>


<script type="text/javascript">
$(document).ready(function() {
  	$('#myCarousel').carousel ({
  		interval: 3000
	});

  	$('.carousel .item').each(function() {
      var next = $(this).next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));

      if (next.next().length>0) {
        next.next().children(':first-child').clone().appendTo($(this));
      }
      else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
      }
    });
});

</script>
  
  <div class="ronbow-signature" id="signature">
    <div class="vid-signature"> 
      <div class="text">
        <h3 style="text-transform: uppercase; font-weight: bold;">Ronbow Signature</h3>
        <hr>
        <p>Ronbow Signature brings together premier artists and designers from around the world to showcase only the finest in creativity and passion. The result: our most diverse and luxurious collections of trendsettings bathroom products.</p>
        <a href="#"> See more ></a>
     </div>
     <div class="vid">
        <iframe width="480" height="235" src="https://www.youtube.com/embed/rhXrtE47hqA" frameborder="0" allowfullscreen></iframe>
        <a href="#"> >>Explore Ronbow Signature Stack Collection.</a>
     </div>
   </div>
   
   <div class="slide-title">
     <h3 style="font-style: italic;">
     Design Inspiration
     </h3>
   </div>
   <div class="slide-signature">
      <div class="regular slider">
        <div class="image-slide" style="background-image: url('{{ 'Slider1_test.jpg' | file_img_url: '2048x' }}');">
            <a href="#" class="text-over">
                <h3>Vento Collection</h3>
               
            </a>
        </div>

        <div  class="image-slide" style="background-image: url('{{ 'Slider2_test.jpg' | file_img_url: '2048x' }}');">
            <a href="#" class="text-over">
                <h3>Free Collection</h3>
            </a>
        </div>

        <div  class="image-slide" style="background-image: url('{{ 'Slider3_test.jpg' | file_img_url: '2048x' }}');">
           <a href="#" class="text-over">
                <h3>Unity Collection</h3>

            </a>
        </div>

    </div>
   </div>
  </div>

  <div class="ronbow-signature" id="ronbow" style="outline: 1px solid #8ebfc0;">
    <div class="vid-signature vid-ronbow"> 
      <div class="text">
        <h3 style="text-transform: uppercase; font-weight: bold;">Ronbow</h3>
        <hr>
        <p>Create your idyllic bathroom spcae with Ronbow, the intersection of innovative bathroom design and precision engineering. 
        From timeless classics to contemporary pieces. Ronbow caters to every lifestyle.
        </p>
        <a href="#"> See more ></a>
      </div>
      <div class="vid">
        <iframe width="480" height="235" src="https://www.youtube.com/embed/Li8UO-pxU4o" frameborder="0" allowfullscreen></iframe>
        <a href="#"> >>Take a peak at the elegance Torino vanity by Ronbow.</a>
     </div>
   </div>
   
   <div class="slide-title">
     <h3 style="font-style: italic;">
     Design Inspiration
     </h3>
   </div>
   <div class="slide-signature">
      <div class="regular1 slider">
        <div class="image-slide" style="background-image: url('{{ 'Slider1_test.jpg' | file_img_url: '2048x' }}');">
            <a href="#" class="text-over">
                <h3>Vento Collection</h3>
               
            </a>
        </div>

        <div  class="image-slide" style="background-image: url('{{ 'Slider2_test.jpg' | file_img_url: '2048x' }}');">
            <a href="#" class="text-over">
                <h3>Free Collection</h3>
            </a>
        </div>

        <div  class="image-slide" style="background-image: url('{{ 'Slider3_test.jpg' | file_img_url: '2048x' }}');">
           <a href="#" class="text-over">
                <h3>Unity Collection</h3>

            </a>
        </div>

    </div>
   </div>
  </div>

  <div class="ronbow-signature" id="essentials" style="outline: 1px solid black;">
    <div class="vid-signature"> 
      <div class="text">
        <h3 style="text-transform: uppercase; font-weight: bold;">Ronbow Essentials</h3>
        <hr>
        <p>Fulfill your everday bathroom design needs with a brand you can trust. The Ronbow Essentials line brings 
         you diverse and accessible high quality products for the perfect bathroom remodel.
        </p>
        <a href="#"> See more ></a>
     </div>
     <div class="vid">
        <iframe width="480" height="235" src="https://www.youtube.com/embed/oDiWPmwiiqY" frameborder="0" allowfullscreen></iframe>
        <a href="#"> >>Check out the stylish Ronbow Essentials Juno collection.</a>
     </div>
   </div>
   
   <div class="slide-title">
     <h3 style="font-style: italic;">
     Design Inspiration
     </h3>
   </div>
   <div class="slide-signature">
      <div class="regular2 slider">
        <div class="image-slide" style="background-image: url('{{ 'Slider1_test.jpg' | file_img_url: '2048x' }}');">
            <a href="#" class="text-over">
                <h3>Vento Collection</h3>
               
            </a>
        </div>

        <div  class="image-slide" style="background-image: url('{{ 'Slider2_test.jpg' | file_img_url: '2048x' }}');">
            <a href="#" class="text-over">
                <h3>Free Collection</h3>
            </a>
        </div>

        <div  class="image-slide" style="background-image: url('{{ 'Slider3_test.jpg' | file_img_url: '2048x' }}');">
           <a href="#" class="text-over">
                <h3>Unity Collection</h3>

            </a>
        </div>

    </div>
   </div>
  </div>

</div>

    {{ 'jquery-1.11.0.min.js' | asset_url | script_tag }}
	{{ 'jquery-migrate-1.2.1.min.js' | asset_url | script_tag }}
	{{ 'slick.min.js' | asset_url | script_tag }}

    <script type="text/javascript">
        $(document).ready(function(){
          $('.regular').slick({
                dots: true,
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                dots: true,
            	arrows: false,

          });
        });
        $(document).ready(function(){
          $('.regular1').slick({
                dots: true,
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                dots: true,
                fade: true,
            	arrows: false,
          });
        });


        $(document).ready(function(){
          $('.regular2').slick({
                dots: true,
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                dots: true,
                fade: true,
            	arrows: false,
          });
        });
    </script> 


<script type="text/javascript">
  function goToByScroll(id){
    id = id.replace("link","");
    $('html,body').animate({
      scrollTop: $("#"+id).offset().top},'slow');
  }

  $("#myCarousel > div > div > div > a").click(function(e){
    //prevent a page reload when a link is pressed
    e.preventDefault();
    //Call the scroll function
    goToByScroll($(this).attr("id"));
  });
</script>

 

0 Likes
New Member
1 0 0

Hi,

I trust you are well.

did you find the solution to your issue? sadly I'm facing the same issue.

could you share with me the solution

 

 

Kind Regards,

mouahdane

0 Likes