The issue persists with the customized Bootstrap carousel featuring thumbnails

By combining http://codepen.io/srkimir/pen/mGbrf and http://codepen.io/transportedman/pen/NPWRGq , I successfully created a fading carousel with thumbnails similar to the one in http://codepen.io/kikibres/pen/gpZoXz .

However, when trying to implement this on my own website, I encountered issues. While the slides were able to fade in at specified intervals, I couldn't get the thumbnails or interval:false feature to work as intended. Moreover, my Dreamweaver text editor flagged a potential error in the JavaScript for the thumbnails, mentioning a missing "use strict" statement for var conf = {. Strangely, the code worked perfectly fine on CodePen but failed on my localhost website.

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>KINCARDINE DIVE LOCKER</title>

<link rel="stylesheet" href="css/style.css" type="text/css">
...

CSS

.productdetails { width: 80%; margin-left: auto; margin-right: auto; }
...
jquerycsstwitter-bootstrapcarouselthumbnails

Answer №1

If you are encountering the "Uncaught ReferenceError," it may be due to the fact that jQuery was not loaded or had not finished loading when your code ran.

The error is likely originating from this section of the code:

$('#carouselHacked').carousel({
  interval: false
});

To resolve this issue, encapsulate the code within a $(function() { }); function so it runs after the DOM has fully loaded.

Your revised code should resemble the following:

$(function() {
    $('#carouselHacked').carousel({
      interval: false
    });

    // Include this additional code to prevent any potential errors during execution
    $('.thumbnails-carousel').thumbnailsCarousel();
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can someone guide me on replicating this design with Bootstrap?

How do I achieve this layout using Bootstrap? I have checked my code but can't seem to find the mistake. Can someone please help me out? <div class="row"> <div class="img-5"> <div class="col-md-4"> <di ...

htmlcsstwitter-bootstrap

What's the best way to include php variables in this Javascript code?

I'm currently in the process of constructing a straightforward news page that utilizes ajax filters based on the user's selected category. The javascript code below establishes a connection with a php file and generates HTML using data from a mys ...

javascriptphpjquerymysqlajax

Interactive sidebar component with navigation and animated section markers

For weeks, I've been attempting to create a navigation sidebar similar to the ones shown in these images: Even though getbootstrap.com/components offers appealing navigation sidebars, I have not found a built-in component in their library. This has m ...

javascriptcsstwitter-bootstrapresponsive-design

Show the center portion of an image without needing to know the size, both horizontally and vertically aligned

I have experimented with various methods like table-cell, but none of them have been successful. All I am seeking is an <img src="" /> within an <a> tag. The <a> element has specific width, height, and overflow:hidden properties set. H ...

htmlcss

Using AngularJS to incorporate personalized font icons

Looking to create a custom font icon library similar to "Font Awesome" for my AngularJS project, as using fonts instead of images is more versatile across devices. Is there a way to achieve this? I have generated a font in .ttf and .svg formats with my ...

cssangularjsfont-facefont-awesomeglyphicons

Is there a way to show textboxes stacked on top of each other without causing them to

Here is the HTML snippet I am working with: <div> <p><label>Faculty <input type="text" class = "f"></label></p> <p><label >Department<input type="text" class = "f"></label></p> ...

htmlcss

What methods can be used to limit URL abbreviations on my website?

I need a simple solution that I have been struggling to figure out. What I want is for anyone attempting to access any webpage directly on my website to be automatically redirected to the home page. For instance, if someone tries to access www.domain-name ...

phphtmlcss

Top method for constructing a link in JQuery with specific parameters

As someone who is new to JQuery, MVC, and web development in general, I am currently working on a project where I need some advice. My goal is to create a filter with four input elements and one output. I have four drop-down select elements on my page. W ...

c#jqueryasp.net-mvc

"How can I exclude empty fields from the form.serialize function in jQuery when using php?" is not functioning as expected

I am facing an issue with using How do I use jQuery's form.serialize but exclude empty fields. Despite following a minimal example that directs to a php script: <html><head> <script src="jquery.min.js"></script> <script typ ...

javascriptphpjquery

What are some key considerations for creating a website that is optimized for printing?

I am working on creating a website filled with content that I want to optimize for printing. My goal is to have the content easily printable without any unnecessary elements like navigation or advertisements. To achieve this, I am considering using two sep ...

htmlcss

Dynamic Data Causes Highcharts Date Formatting to Adapt

I wanted to create a line graph using Highcharts with the Date Format on x-axis set to "%b %e". For example, I expected 06/27/2014 to be displayed as Jun 17. Despite setting the date-format correctly, Highcharts seems to automatically change it when rende ...

javascriptjqueryhighcharts

Uncover information by utilizing Scrapy to scrape data from websites with infinite scrolling via

Currently, I am a novice in both python and scrapy. I am seeking assistance as I aim to extract a product listing from a website. However, the site has a "view more" products feature at the end which triggers an ajax request for text/html, loading another ...

jqueryajaxweb-scrapingscrapyinfinite-scroll

What is preventing the listener from activating?

I came across some HTML code that looks like this: <form id="robokassa" action="//test.robokassa.ru/Index.aspx" method="post"> <input type="text" id="OutSum" name="OutSum" value="" placeholder="Сумма пополнения"> ...

javascriptjqueryevent-handling

Is there a way to adjust the container width to 1440px while also ensuring that the columns remain responsive with the help of Bootstrap 4 and SCSS?

Is there a way to customize the width of a container to 1440px while ensuring that the columns are still responsive? My project is built using Bootstrap 4 and SCSS. <div class="container"> <!-- Custom Container Width at 1440px--> ...

cssbootstrap-4sassresponsive-designgrid

The jquery selector fails to retrieve all elements

On the upcoming web page, I am attempting to use Jquery to select all <li> elements. Specifically, I want to target all the products contained within <ul class=search-result-gridview-items">. You can find the products here: I have made attempt ...

javascriptjqueryhtmlcss

Using PHPs nth-child in media queries

There are multiple images on MyPage, typically displayed in rows of 6. However, the number of images per row adjusts based on browser size using media queries. The issue arises with the margin set for the last image in each row, as the nth-child property r ...

phphtmlcss

Wrapping up an If-Else Condition

Here's a question for you: <table id="menuStructuresPageList" class="rounded-corner dataTablePageList"> if ($('.dataTablePageList')) { I'm trying to create an if statement that checks if the element with the class of dataTables ...

jquery

Leveraging jQuery to Access ASP.NET AJAX Page

Hello, I need help figuring out how to call an ajax function using jQuery. Here is the snippet of code that I am currently working with: <script src="js/jquery-1.4.1.js" type="text/javascript"></script> <script language="javascript" type= ...

jqueryajax

How to apply a series of spaces using span/tspan with jquery/javascript

Check out this fiddle: http://jsfiddle.net/jzLu4toe/3/ <span id='tghj'></span> $('#tghj').text('Hey There'); I'm facing an issue where I need to insert multiple spaces inside a span element. ...

javascriptjqueryhtml

The images in Bootstrap-Grid at 1920 resolution stay compact

Is there a way to make images grow beyond the 1280 resolution? This is how it appears at 1920 resolution https://i.sstatic.net/JmYc7.png And this is at 1280 resolution https://i.sstatic.net/Sk19K.png <div id="logokutu1" class="d ...

htmlcssbootstrap-4responsive-designgrid