jQuery Slider not appearing on the page

I am attempting to incorporate the Basic jQuery Slider into my website. Below is the code I have used:

For HTML file:

<div id="slides">
<ul class="bjqs">
<li><a href="somelink"><img src="someimage" width="1200" height="200" title="Test"/></a></li>
<li><a href="somelink"><img src="someimage" width="1200" height="200" title="Test2"/></a></li>
</ul>
</div>

<script>
jQuery(document).ready(function($) {
    $('#slides').bjqs({
        animtype: 'slide',
        height : 1200,
        width : 200,
        responsive : true
    });
});
</script>

However, nothing seems to be displaying! It's just a blank screen with no images or slider.

Here is the jsFiddle link for reference: http://jsfiddle.net/46S6g/

Answer №1

Seems like you may have overlooked adding the actual plugin into your code.

<script src="bjqs-1.3.min.js"></script>

Check out this working jsFiddle example: http://jsfiddle.net/46S6g/3/

I have included the plugin link in the External Resources section of the jsFiddle and included the latest jQuery version in the Frameworks & Extensions tab.

Hope these steps help resolve the issue for you.

Answer №2

I followed the same steps and it actually worked, as suggested by others make sure you have included all necessary files.

http://jsfiddle.net/rVHAx/1/

$(function() {
$('#slides').bjqs({
    animtype: 'slide',
    height : 200,
    width : 300,
    responsive : true
});

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

The XMLHttpRequest onload() function is failing to pass an instance of the XMLHttpRequest object

I am facing an issue with a function that sends a basic AJAX request to my server. The JavaScript code in the browser is as follows: function testRequest() { var xhr = new XMLHttpRequest(); xhr.onload = () => { console.log("RESPONSE R ...

What is the best way to position a single element in React using the Grid Component without causing any overlap?

I am struggling with positioning 3 components on my react page: PageHeader, SideMenu & FeatureList (which consists of Display Cards). Here is the code for each component: App.js // App.js code here... PageHeader.js // PageHeader.js code here... SideMenu ...

Transferring data using Ajax in a contact form PHP file

I recently started learning about AJAX and came across a code snippet online for sending data to a PHP file using AJAX. However, I'm facing an issue where I'm not sure if the data is being submitted or what is happening. The alert box doesn' ...

Introduction to Grid Layout Using Bootstrap - Rows

Encountering an issue with the vertical alignment of items in the code snippet below when using Bootstrap 4. Initially, the items are stacked vertically, but they align horizontally when either the "row" or "row align-items-start" classes are applied. &l ...

What is the process for retrieving an excel file from the backend to the frontend?

I am currently facing an issue where I want to initiate a browser download of an excel file that is generated in my backend. However, I am struggling to figure out how to pass this type of response. app.get('/all', function (req, res) { db.q ...

Caution: Additional server attributes detected: style

Alert in my Next.js project, I encountered the following message: Notice: Server is sending additional attributes: style I am uncertain about the source of this warning and therefore unable to provide any code snippet. ...

Develop and share a function to be assessed within a different scope's context in JavaScript

Currently, I'm exploring the use of angular and bootstrap tour and I have a challenge in trying to isolate objects within their own area without storing them in the controller. My goal is to store an object in the service, which also contains function ...

Changes made in the view of a VueJS application are not being reflected in Laravel when using

Embarking on my first journey with VueJS within a Laravel PHP framework has been quite the adventure. A new project is on the horizon, and I dove in headfirst by making various changes, such as adding new elements and altering titles. However, much to my d ...

The PHP script's header() function is failing to execute

Recently, I encountered an issue with my JavaScript code that calls a backend PHP script using AJAX. The main function of the AJAX request is to send user login data (username and password) to the PHP script, which in turn queries this information on the S ...

"Addclass() function successfully executing in the console, yet encountering issues within the script execution

I dynamically created a div and attempted to add the class 'expanded' using jQuery, but it's not working. Interestingly, when I try the same code in the console, it works perfectly. The code looks like this: appending element name var men ...

The HTML output from converting Tiny MCE text content is not rendering properly on the React app's front-end

I'm currently working on a blog project using React and Material UI. In order to enable users to add posts, I've integrated a TinyMCE rich text editor onto the page. The issue arises when trying to display a specific blog post, as the content app ...

Click event not triggered when transitioning to Service section in Thinkster tutorial

I've been following a tutorial on MEAN stack development () and I encountered an issue after incorporating Angular Services. For some reason, the function incrementUpvotes stopped working and I'm struggling to identify the cause. Since I'm r ...

What causes divs to be interspersed among other divs when Float is enabled?

I am looking to create a layout for 4 sections, similar to a table, utilizing only divs and CSS. The intended output is this: Logo-----------Info Business-------Client I initially thought it would be simple by using the Float property. However, when I se ...

The FileReader encountered an error because the first parameter is not a 'Blob' type

I seem to be encountering an issue with a javascript FileReader that is throwing the error Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. This problem occurs intermitt ...

The JavaScript Ajax request appears to be malfunctioning in both Firefox and Google Chrome, however, it seems to be functioning properly

I am currently using JavaScript to make an Ajax request to communicate with an Arduino webserver and dynamically update the content on a webpage. While this functionality has been working smoothly in Safari, I have encountered issues when trying to use it ...

Refreshing data from firebase on each route change

I created an Angular service that retrieves items from Firebase using snapshotChanges and returns them. In my component, I subscribe to the data and store it in an array. I then display the data in cards using ngFor. However, whenever I navigate between p ...

Are you experiencing issues with modal contents extending beyond the modal on smaller screens?

I recently installed a modal plugin called blockUI for my image uploading needs. Although I have styled and positioned everything accordingly, I am facing an issue: Whenever I resize the browser screen, switch to my iPhone, or use another screen, some con ...

Customize your Jquery UI Calendar with Changing Background Images for Each Month!

How can I change the background of jQuery UI datepicker based on the selected month? I have created 12 classes, each representing a month, and the selected month already has the background. I tried using "onChangeMonthYear: function(year, month, inst) { ...

In my JavaScript code for generating a Fibonacci series, I aim to include a comma at the end of each string

I am currently working on a JavaScript program to generate a Fibonacci series, and there are certain conditions that need to be met: Each number in the series should be separated by a comma. The method should handle invalid values and return -1 for integ ...

FullCalendar, showcasing real-time event creation as you select dates

I am currently utilizing fullcalendar 4 on my website and I am attempting to incorporate an indicator for when a user selects a date on the calendar. While the background color changes, it's not very visible. My aim is to replicate the functionality ...