Issue with Flexslider functionality on HTML website (Possible jQuery loading error?)

I am facing an issue with my Flexslider galleries: the first image loads, but there are no navigation buttons and no animation.

If you want to take a look at the problem on my website

After loading an old HTML gallery and testing it, I realized that the problem does not lie within the HTML code, as even the old page now displays a broken gallery.

This leads me to believe that the issue might be with the JavaScript or CSS style file.

I have reviewed both the old and new versions of the JavaScript file, and everything seems unchanged.

Thank you in advance for any assistance you can provide!

Below is the section that calls the JavaScript:

<!-- CSS================================================== -->
<link rel="stylesheet" href="http://www.esthergibbons.com/css/style.css">
<link rel="stylesheet" href="http://www.esthergibbons.com/css/colors/cyan.css" id="colors">

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Java Script
================================================== -->
<script src="http://www.esthergibbons.com/scripts/jquery.min.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.flexslider.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.selectnav.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.twitter.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.modernizr.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.easing.1.3.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.contact.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.isotope.min.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.jcarousel.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.fancybox.min.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.layerslider.min.js"></script>
<script src="http://www.esthergibbons.com/scripts/jquery.shop.js"></script>
<script src="http://www.esthergibbons.com/scripts/custom.js"></script>

Answer №1

It appears that you have not implemented the .flexslider function in your code.

To resolve this, make sure to include the following snippet in your custom.js file:

$('.flexslider').flexslider({
  animation: "slide"
});

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

What advantages does $sce or Strict Contextual Escaping provide in AngularJS, and why is it unnecessary for React?

I find it perplexing that I am unable to fully grasp the true value of utilizing SCE in AngularJS (even after reviewing the documentation) when it comes to security benefits. It leaves me wondering why React does not require SCE. So, to summarize my quest ...

Alternative to the Javascript Delay Function

I am working on a loading screen for my webpage that will cover the entire screen for 10 seconds before transitioning into the main content, which ideally should have loaded during that time frame. Currently, the issue is that the delay function only disp ...

Guide on creating a hover-based side menu

I am looking to enhance the sub-menus like PRODUCT 1, PRODUCT 2, etc. by adding side menus that appear when hovering over them. Can anyone assist with implementing this feature in the code below? Below is the current code snippet: CSS: @import url(http: ...

What could be causing my line-clamp to malfunction when using a fixed height in the Safari browser?

I have a problem with the design of my episode list on mobile devices. The list has a fixed height, and I am using the line-clamp-2 property for the episode titles that exceed two lines. While everything looks fine on my PC and even when using Dev Tools t ...

Validating an Element Directive in AngularJS: A Step-by-Step Guide

I have developed a directive for handling numbers function numberInputDirective() { return { restrict: 'E', scope: { model: '=', disabled: '=?', decimals: ...

Tips for preventing visual glitches caused by inaccurate world coordinates in WebGL

Issue: Encountering rendering glitches while using world coordinates in the fragment shader to display a grid. The grid does not move uniformly when the plane it is rendered on is moved, resulting in one "half" moving while the other remains idle. Refer ...

ReactStrap: Transparency issue with DropDown items on mobile devices

I've encountered an issue with my dropdown menu that works perfectly on desktop: https://i.sstatic.net/73Z0X.png However, on mobile devices, it appears to be transparent for some reason: https://i.sstatic.net/dhtOw.png Here is the code snippet ...

What is the best method for developing a draggable element that remains stable?

I have developed a simple script for draggable elements, however, I am facing an issue. Whenever I move the mouse quickly, the element loses focus. Is there a way to improve the stability of the dragging functionality regardless of how fast I move the mou ...

Unable to define the coordinates of one object in relation to another in three.js

My understanding of how positions work may be off, as they are not behaving the way I anticipated. When I create two Object3Ds, I would expect to be able to set the position property of the second one as a reference to the first so that it follows it, but ...

Choosing a box will cause a dashed rectangle to appear when the mouse is selected

Whenever I try to select an option in my select box, a dotted rectangle appears. How do I remove this feature? https://i.sstatic.net/BzsL2.png I have noticed that many others are also facing the same issue. I tried updating my CSS with some properties ba ...

What is the best way to display and conceal a loader in order to reveal additional posts?

How can I display a loader when the user clicks on the "load more posts" button, show it while the posts are loading, and hide it once the posts have been successfully loaded? Additionally, I want to show the loader again when the user clicks on the button ...

Using AngularJS filters to narrow down content within an ng-repeat

Check out this JSON code example: $scope.info = [{"name":"Category1", "data":[{"name":"Item1"}, {"name":"Item2"}]}, {"name":"Category2", "data":[{"name":"Item3"}, {"name":"Item4"}]}]; I have utilized ng-repeat to display the list and ...

Troubleshooting the issues with implementing cross-browser jscrollpane functionality

Hey there! I've been exploring this tool to customize the default scroll-bar, and here's a fiddle showcasing my experimentation. In the fiddle, I've included the following code snippet <div class="scroll-pane horizontal-only">(located ...

What causes the transformation of a POST request into a GET request?

Upon utilizing jQuery's $.ajax() or $.post() method to transmit form data to the server, I've noticed that the 'data' string gets appended to the end of the URL. This seems to be causing the POST request to transform into a GET request. ...

The Power of Javascript in Enhancing Lightbox Experience

I am trying to enhance an image outputted by JavaScript with Lightbox functionality. Since the image link is dynamically created, I am approaching it this way! Despite searching on Stack Overflow, I have not found a solution that fits my needs... The cur ...

Issue submitting form with tinymce textarea multiple times via ajax

Struggling with submitting a form using ajax with tinymce as the textarea editor. The issue arises when trying to submit the form multiple times, as it only works on the initial attempt. This is the form structure <form action="{{action('QuizCont ...

What is preventing me from running my alert script in JavaScript?

Need some assistance here. I have a simple question. I am trying to create an alert function using JavaScript, but it is not working. <script type="text/javascript"> $(".delete").click(function(){ alert("Are you sure?&q ...

What is the best way to save the toggleClass value of various selectors along with their corresponding classes in localStorage?

I've been attempting to preserve the toggled class of multiple elements using local storage or cookies in order to maintain the toggled class after a page refresh. Despite trying various solutions such as js cookie and other tutorials, I've had n ...

Timeout for AngularJS Bootstrap UI Modal

I am having some trouble with opening a bootstrap modal using the $timeout function. The issue I am facing is that the modal keeps opening multiple times as the timeout fires repeatedly. Any assistance or suggestions on how to resolve this problem would be ...

Choosing an element that does not have a particular string in its colon attribute name

In my code, I have multiple elements structured like this: <g transform="matrix"> <image xlink:href="data:image/png" width="48"> </g> <g transform="matrix"> <image xlink:href="specific" width="48"> </g> <g tran ...