Having trouble getting your jQuery image slideshow to function properly?

I am currently working on creating an image slider that fetches images from placekitten. My goal is to make it versatile enough to accommodate different image sizes. The slider should display a small description of the image at the bottom, the name of the image at the top, and have navigation buttons sliding in from the top upon hover.

However, I am experiencing two main issues:

1. Despite several attempts using jQuery, I have been unable to successfully implement toggles. It appears that the problem may be related to the presence of buttons for each image. How can I change the image title while maintaining the same button functionality?

2. I am also looking for a way to ensure that the description field expands accordingly as the text length increases.

This is my current progress. Additionally, I am wondering if there are any user-friendly libraries available to simplify this task.

Here is the JS Bin link

javascriptjqueryhtmlcssimage

Answer №1

Utilize the jQuery cycle plugin to easily create a dynamic image slideshow on your website. Simply replace the sample images with your own code to customize the effect.

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

</head>

<style type="text/css">

</style>

<body>

<div class="nav"><a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a></div>
        <div id="slideshow" class="pics">
            <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
        </div>



</body>

<script type="text/javascript">
 $('#slideshow').cycle({
    fx:     'scrollHorz',
    prev:   '#prev',
    next:   '#next',
    after:   onAfter,
    timeout: 0
});

 $(function() {
    $('td pre code').each(function() {
        eval($(this).text());
    });
});
function onAfter(curr, next, opts) {
    var index = opts.currSlide;
    $('#prev')[index == 0 ? 'hide' : 'show']();
    $('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
}


</script>
</html>

For additional jQuery cycle plugins, check out: jQuery cycle plugins

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

Setting up Express routes in a separate file from the main one: a step-by-step

My goal is to organize my routes separately from the main app.js file using the following file structure. I attempted to create a api/user/ post API but encountered a 404 error. Any suggestions on how to resolve this issue with the given file structure? . ...

javascriptnode.jsexpressmiddleware

Working with attributes in AngularJS directives

Building an overlay (or modal window) in AngularJS has been on my mind, and I've made some progress with the html/css layout. Here's a sneak peek at what it looks like: <section class="calendar"> <a open-overlay="overlay-new-calenda ...

javascriptangularjs

Hyperlinks within an SVG do not function properly when the SVG is embedded in an image tag within a Bootstrap 5 Modal

Interestingly, the cursor remains unchanged even when hovered over the section with the hyperlink. Strangely, when I view the svg file separately in my browser, the links function properly. Here is the code snippet: <HTML> <div class="moda ...

csssvgbootstrap-modalbootstrap-5

Incorporating Node.JS variables within an HTML document

After building a simple site using Express, I discovered that Node.js variables can also be used with Jade. exports.index = function(req, res){ res.render('index', { title: 'Express' }); }; This is the code for the index file: ext ...

javascripthtmlnode.js

Retrieve a single record in Angular/Typescript and extract its ID value

There is data stored in a variable that is displayed in the Chrome console like this: 0: @attributes: actPer: "1", id: "19" 1: @attributes: actPer: "1" id: "17" etc To filter this data, the following code was used: myvar = this.obj.listR ...

javascriptangulartypescriptangular6

Troubleshooting: WordPress integration with PhoneGap not processing JSON data

I've been following a tutorial and I'm encountering some issues with the examples provided. Despite my attempts to run the examples, I am not seeing any results: app.html <!DOCTYPE HTML> <html> <header> <script src="https:/ ...

javascriptandroidjsoncordova

Chip input component in React

I've recently upgraded to React 17 and encountered an issue with chip input fields like material-ui-chip-input not working properly. I've tried various npm packages, but none of them seem to be compatible with React version 17. Does anyone know ...

javascriptreactjsmaterial-ui

how to quietly change the focus of an element using jquery and css?

Whenever I modify the CSS of a scrolled-past element, the view abruptly jumps to that particular div (by scrolling up) upon applying CSS changes using .css(...). Something as simple as adjusting the background-color can trigger this effect. Is there a wor ...

jquerycss

Tips for Testing an Ajax jQuery Function Within the document.ready Event

I am in the process of developing a script that utilizes $.ajax to make requests for a json api. My goal is to create unit tests that can verify the results received from the ajax request. For instance, I expect the returned JSON object to contain "items" ...

javascriptjqueryajaxunit-testing

Issue with Material UI dropdown not selecting value on Enter key press

I have encountered an issue with the material UI dropdown component that I am using. When I navigate through the dropdown options using arrow keys and press enter, the selected value does not get highlighted. Below is the code snippet for the dropdown: ...

javascriptreactjsdrop-down-menumaterial-ui

MUI React - Issue with changing SvgIcon color using override

Currently, I am utilizing MUI version 5 within a React project. My objective is to customize the icon color for the Error Alert by using General StylesOverrides. Although I successfully altered the color on the Alert component, I am unable to discover a ...

javascriptreactjsmaterial-ui

Steps to ensure checkboxes are enabled for selection only when another box has been checked

Consider having 3 checkboxes: 1 'parent' checkbox and 2 'child' checkboxes. If the parent checkbox is selected, you should be able to select either or both of the child checkboxes. If the parent checkbox is deselected, neither of the ...

htmlangularcheckbox

Is there a way to duplicate an object along with its unique form while retaining the form of the original object?

According to HTML specifications, it is not valid to have a 'form in form' structure. Here's my issue: Let's say I have a Car model form created using a Form Object that includes additional information. However, there is a section in t ...

jqueryruby-on-railsajaxforms

Is there a way for me to manually initiate a digest cycle on the parent scope based on my instructions?

I am struggling with getting a directive to render automatically when a change is made to the underlying model programmatically. Using $scope.$apply seems like the right approach, but unfortunately it's not working as expected. The directive only rend ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Retrieving over 300,000 rows from elasticsearch and saving them as a .csv document

Hi there, I am currently working on a website in nodejs that utilizes an Elasticsearch database. One of my indexes, 'bigData*', contains 366,844 rows with each row consisting of 25 items, each being a different string of varying sizes (with a max ...

javascriptdatabaseelasticsearchnpm

How to assign multiple selection values in Bootstrap's select picker

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select ...

javascripthtmljquerybootstrap-4bootstrap-selectpicker

I am unable to determine if I have already selected a List Item

My goal is to have a functionality where clicking on "Download Drivers" will open the list, and clicking again will close it. This should be achieved with onclick events only, no hover effects. Additionally, I want the list to remain open even if I click o ...

javascripthtmlcss

Guide to creating dynamic borders around your PHPexcel output

Looking for assistance on adding borders around output arrays in an Excel report using PHPexcel. I reviewed the documentation, but the examples are static, requiring a predefined number to set. My goal is to have all arrays transferred to Excel with bord ...

javascriptphpjqueryhtmlphpexcel

Change the way a button interacts with a different element

Currently, I am utilizing SlickSlider from http://kenwheeler.github.io/slick/ and attempting to integrate the Next and Prev buttons with other elements (specifically spans within another container). I have attempted the following: $('button.next&apo ...

javascriptjqueryhtmlsliderslick.js

Steps for resolving the Error: ENOENT - file or directory not found:

After numerous attempts, I am still facing difficulties deploying my site to GitHub Pages. Whenever I run npm run deploy, the following error message persists: **Error: ENOENT: no such file or directory, stat 'C:\Users\Wordsoft Ent\OneD ...

javascriptreactjsnpm