Previous Button on jQuery/Javascript Slider Not Functioning

Having a small issue with my previous button, #prev, as it is not scrolling back to the previous image but instead to the next image. This is the script I am using: http://jquery.malsup.com/cycle/int2.html

Additionally, when I try to set the width of the images to 100%, they disappear.

You can see a live view of my slider here.

$('#slider').cycle({ 
fx:     'scrollLeft', 
speed:  'slow', 
timeout: 5000, 
next:   '#next', 
prev:   '#prev'
});

<div class="page-wrapper">
<div class="controller" id="prev">
<i class="fa fa-arrow-left"></i>
</div>
<div id="slider">
<a href=""><img src="http://placehold.it/1280x300"></a>
<a href=""><img src="http://placehold.it/1280x300"></a>
<a href=""><img src="http://placehold.it/1280x300"></a>
</div>  
<div class="controller" id="next">
<i class="fa fa-arrow-right"></i>
</div>
</div>
javascriptjqueryhtmlcss

Answer №1

Take a look at this CodePan example

Here is the JS code snippet:

$('#slider').cycle({ 
    fx:     'scrollLeft', 
    speed:  'slow', 
    timeout: 5000, 
    prev:   '#next'
});
$('#slider').cycle({ 
    fx:     'scrollRight', 
    speed:  'slow', 
    timeout: 5000, 
    next:   '#prev', 
});

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 screen reader is unable to interpret the text that is visible within the anchor tag

I have an Angular application with a dropdown menu implemented as shown below. When using the NVDA screen reader to navigate, only the content inside the aria-label attribute is being read when tab focused. However, I want it to also read the content (&ap ...

htmlaccessibilityanchorscreen-readers

Is there a way to modify Style Properties in JavaScript by targeting elements with a specific class name using document.getElementsByClassName("Class_Name")?

I am seeking a solution to change the background color of multiple div boxes with the class name "flex-items" using JavaScript. Below is my current code: function changeColor(){ document.getElementsByClassName("flex-items").style.backgroundColor = "bl ...

javascripthtmlcss

What is the best way to pass JSON data into a JavaScript function?

As a beginner in javascript, I have been struggling to find a solution for my problem for a week. The code example I am working with is shown below (all within an HTML page in the head tag) //example function 1 function randomString(len, charSet) { ...

javascriptjson

Ways to eliminate a textbox from an HTML table using jQuery or JavaScript while retaining the textbox values

Currently, I am facing a task where I have a table with a column filled with textboxes. My goal is to eliminate the textboxes using jQuery/JavaScript while retaining the values within them. Here are a couple of methods I have attempted: // removes both t ...

javascriptjqueryhtml

Is there a way to handle the completion event of jQuery's .tmpl() method?

Can someone guide me on how to create a $.tmpl ready function? In my code, I send the ajax json to my createForm function. var doFunction = { new: function() { $.ajax({ url: 'index.php?...', success: function(data) { cr ...

phpjqueryhtmlajaxjson

Accessing PHP variables within the HTML portion of a PHP document

Setting up my own contact form for the first time using PHP has been a learning experience. While I am able to receive emails from the form, I'm struggling to display the user-inputted information in the email. The HTML <label for="name"> ...

phphtmlvariables

Instead of using colons, display the separation of hours, minutes, and seconds with underscores

Currently, I am utilizing moment.js to retrieve the present date and time with the intention of formatting it in the specific format below 'MMMM Do YYYY, h:mm:ss a' Unfortunately, the problem arises as the delineation between hours, minutes, and ...

javascriptvue.jsdatetimemomentjs

Struggles with implementing CSS Grid's dynamic column heights and expanding rows

Linked partially to Removing empty space in CSS Grid, with specific adjustments I am aiming for. Essentially, I want my rows and columns to expand and contract based on the content present. In this CodePen example, you can observe that the content of the ...

htmlcsscss-grid

JavaScript format nested data structure

For my latest project, I am working on a blog using Strapi combined with Nuxt. To fetch the categories and articles data for my blog, I send a JSON object from my front-end application using Axios. { "data": [ { "id": 1, ...

javascriptvue.jsaxiosnuxt.jsstrapi

How to Share Your Vuejs Component with the World by Publishing it on npm

I have recently developed a Vue.js 2 project using webpack which consists of 2 components. My goal is to share this project as an npm package so that the components can be easily reused in multiple projects. After publishing the project on npm with npm pu ...

javascriptnpmvue.jsvuejs2vue-component

Is there a glitch causing the Owl carousel to malfunction?

I am struggling to implement a fullwidth owl carousel slider on my webpage, but I'm facing issues with getting it to function properly. I suspect there might be a conflict with the current template that I'm using. Here is the step-by-step proce ...

javascriptjqueryhtmlcss

Launching an HTML document with checkboxes already selected

I am attempting to load my HTML page with checkboxes already checked if they were selected on the previous page. The code I currently have is shown below: {% if job.activism %} checkbox logic goes here {% endif %} <br><input type="checkbox ...

javascriptpythonhtmldjango

What is the best way to center an image within its div, especially when the image size may vary and could be larger or smaller than the div wrapper?

Is there a way to horizontally center an image inside a div, regardless of the size difference between the image and its wrapper? I am aware of a Javascript solution, but I am specifically looking for a CSS-based solution. The following sample code does ...

css

"Implementing Scrollify.js to dynamically add a class to the current section

I'm attempting to dynamically add an 'active' class to the current section on a page using scrollify.js. While I can retrieve the index value, I am struggling to get the section id or class. How can I obtain the id or class of the current s ...

javascriptjqueryjquery-scrollify

Tips for using unique fonts in email text display

As I was editing a Mailer template in core php, I found myself wanting to set a custom font for the text displayed in the mail template similar to how we do it for websites using CSS and imported fonts. Below is the code snippet that I have been using: & ...

cssuser-interfacefontsgmailmailer

Using JSON in JavaScript to handle the click event of ASP.NET buttons

Here is the code that works well for me. I need to execute two different server-side functions, and they can't run at the same time as I have separated them. Default.aspx/AddCart btnUpdate Click Event The issue I'm facing is that the alert box ...

javascriptasp.netjsonvb.netwebmethod

Tips for reducing the height of the footer without compromising the alignment of the text within

My attempt to reduce the height of my footer in CSS using padding, margin, and other methods was unsuccessful. All of these adjustments either pushed the footer completely out of the bottom or left the text uncentered. footer { background: #fce138; wid ...

htmlcss

Error: Unable to locate module '@emotion/react' in 'E:frontend ode_modules@muistyled-engine' directory

I've been trying to import a box component from @mui/material/Box. After installing Material-UI 5 using npm i @mui/material, I encountered the error message Module not found: Can't resolve '@emotion/react' in 'E:\frontend&bsol ...

javascriptreactjsnpmmaterial-ui

Displaying the information from a nested array of objects in an HTML table through iteration

In the code snippet below, there is an input with a nested array of objects. The main array of objects is called summary and within it, there's a nested array called run_type. let input = { "summary": [ { " ...

javascripthtmljquerycssreactjs

Updating a secondary state array is possible by modifying a JavaScript array with setState()

In my React application, there is a grid where names can be selected. When a name is chosen, the app retrieves corresponding data from a database and displays rows of information related to that particular name. Each row is represented as an object stored ...

javascriptarraysreactjs