Problem with Jquery HTML CSS Slideshow

Currently I am working on integrating two sliders into one webpage using the demo available at . One of the sliders is customized from the Linking demo and I have named them slider1 and slider2 with different styling using global.css for slider-1 and text.css for slider-2.

After inspecting the slides.min.jquery.js file, it became apparent that it utilizes CSS elements such as slides_container, next, prev. To accommodate my customizations, I created a new file called slider.text.jquery.js where I replaced these CSS elements with slides_containerT, nextT, and prevT based on the styles defined in text.css. However, the code is not functioning as intended. Any assistance would be greatly appreciated as my project deadline is approaching.

Can anyone provide guidance on how to modify the slides.min.jquery.js file to incorporate both the styles from global.css and text.css for pagination?

Thank you, Pam

javascriptjqueryhtmlcss

Answer №1

You have the freedom to define multiple slides on one page without the necessity of creating a separate slider.text.jquery.js file like how you previously did. Simply customize your second slider using the styles specified for #slider2.

$(function(){
    $('#slider1').slides({
        generateNextPrev: true,
        play: 2500
    });
    $('#slider2').slides({
        generateNextPrev: true,
        play: 4500
    });
});

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

Menu Table displaying errors in layout

I've been struggling to align the menu table to match the homepage, but so far I haven't had any success. It seems like the main index.php page is using its own CSS for some unknown reason. Check out lcrisq.com Here is the desired design: Take ...

htmlcss

Ways to stop your browser from opening a new window when it is unable to recognize the address

When using a custom protocol to open a Windows application from my web application, everything works correctly without any issues. However, if the Windows application is not installed on the PC, a new window opens displaying "The address wasn't unders ...

javascriptjqueryasp.net

Is there a simple method in JavaScript to combine, structure, and join numerous multi-dimensional arrays in a specific manner (from right to left)?

Looking for a simple solution to merge, flatten, and concatenate multiple multi-dimensional arrays in JavaScript in a specific manner (from right to left) # Example [['.class1', '.class2'], ['.class3', ['.class4', & ...

javascriptjqueryarraysmultidimensional-arrayunderscore.js

Utilizing Jquery to Invoke Bean Method

Can a Bean be called from Jquery? My scenario is as follows: I have a Servlet based on JSF 1.2. If a user is idle for a certain amount of time, I want to invalidate their session. A Jquery dialog box will appear 1 minute before the session is invalidated ...

javajqueryjsf

I am looking to expand the width of the Bootstrap container specifically for the Max width

I need to adjust the width of the Bootstrap container to be responsive on all devices, especially maximizing the width on larger screens. Can anyone provide guidance on how to achieve this? Thank you in advance. To view my website, please follow this link ...

htmlcssbootstrap-4

Library with integrated Jquery functionalities

Hello again with another query. I recently came across a jQuery code that allows you to click on an entire table row (tr) to show/hide other rows (specified as .none). I managed to find the code and it works perfectly on JSFiddle. However, when I try to im ...

jquerycss

Using ReactJS: Injecting components and passing variables in extended components without the need for functions

Currently, I am utilizing apollo for the authentication process in my nextJS application. My next task is to incorporate i18n support, but I am encountering some fundamental issues: The primary obstacle lies in handling class Index extends React.Component ...

javascriptreactjsnext.js

Define the format for the output file name in TypeScript

I am trying to change the filename of a TypeScript generated js file. How can I accomplish this? For instance, I currently have MyCompany.ClassA.ts The default output filename is MyCompany.ClassA.js However, I would like the output filename to be MyComp ...

javascriptvisual-studio-2013msbuildtypescripttypescript1.7

The current date is cycling back to the month before

There is a datetime received from my api as 2018-09-01T00:00:00.000Z, referred to as frame.scandate. Another date is generated within the program as 2018-09, simply known as scandate. These examples can represent any year/month combination. In my code: ...

javascriptangulartypescriptmomentjs

Seamless upward swipe effect (Animation in React Native)

How can I achieve smooth closing of a modal screen by swiping up? The modal screen should be able to close smoothly by swiping up. Currently, the modal is implemented with an Animated Value and PanResponder in order to detect swiping gestures. The problem ...

javascriptreactjsreact-nativeandroid-animationreact-native-animatable

Having trouble with the ionic ion-nav-buttons not working on initial load?

My table view triggers the PixCtrl controller when a cell is clicked. If the connection is successful, data is retrieved using $http.get, otherwise sqlite is used. This setup works fine. However, I am facing an issue with my ion-nav-buttons being dynamic. ...

javascriptangularjsionic-framework

execute numerous queries simultaneously

I have a task of creating a bridge (script) that connects two databases, Mongo and Oracle. First, I execute three find queries on my MONGO database from three different collections: Collection 1 = [{ name: 'Toto', from: 'Momo', ...

javascriptnode.jsmongodbexpressecmascript-6

Struggling with parameter passing issues and preparing code for seamless integration with MYSQL database

I've been dedicating the past four days to a project that I've crafted entirely by hand to test my JavaScript skills as I progress through Codecademy courses. The goal is to develop a browser-based checklist program, and so far, I've success ...

javascriptjquerymysqlparameter-passing

Each Vue instance on the page has its own isolated Vuex store

I have a situation where I am creating multiple Vue apps on the same page: import Vue from "vue"; import App from "./App.vue"; import useStore from "./store"; const arr = [1, 2]; for (const index of arr) { const store = use ...

javascriptvue.jsvuejs2vuex

When you click, a new webpage opens within my website, similar to the feature on Facebook

When using Facebook on mobile, clicking on a link to a person's website opens the website in front of the Facebook page. However, when users press the X in the top left corner, it deletes the webpage but keeps Facebook open. On my desktop computer, I ...

html

Scaling Flexbox divs based on images dimensions

Check out this cool example page When resizing the window in Firefox, Internet Explorer 10, and Opera, the images remain at their current sizes without any scaling. However, Chrome shrinks everything down proportionally as desired. It's unclear whet ...

cssflexbox

Navigating on a page using anchor tags within a dropdown menu

I'm in the process of creating a top navigation bar with dropdown functionality that appears when hovering over certain navigation items. Here's how it currently looks: $(document).ready(function(){ $('[data-toggle="tooltip"]').t ...

javascripthtmlcssdjangobootstrap-4

Setting up Angular 4 with TailwindCSS

Can TailwindCSS be configured with Angular (4+)? I am willing to eject the Angular project in order to make webpack configuration accessible. However, I am uncertain about what needs to be included in the webpack.config.js file to ensure that TailwindCSS ...

cssangularconfiguretailwind-css

Generating new elements on the fly using jQuery and passing a string parameter through the onclick event

While dynamically creating HTML, I encountered a syntax error. If I modify href="javascript:startChat(' + user_id + ','video')" to href="javascript:startChat(' + user_id + ','"video"')", I receive an error stating &a ...

javascriptjquery

What is the best way to assign a dictionary value to 'v-model' using a specific key?

Currently, I am working on integrating filterDataArray into my application to dynamically add parameters to my API requests. For this purpose, I have initialized the filterData array as follows: filterData: [ {key: 'name', value: '&ap ...

javascriptvue.jsvuejs2vue-componentvuetify.js