Have you considered showcasing all images in a carousel format?

I have a total of 6 picture blocks, but only the first 3 images are displayed in the carousel. I suspect there may be an issue with jQuery, but I'm unsure where to look. Any hints or guidance would be greatly appreciated. Thank you!

Below are the blocks with images:

<div id="collection-images" data-current="0">
  <div class="photo-box">
    <img id="image0" data-photo="1" data-pos="right" class="coll-img right-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/festival.jpg">
  </div>
  <div class="photo-box">
    <img id="image2" data-photo="0" data-pos="front" class="coll-img front-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/beach.jpg">
  </div>
  <div class="photo-box">
    <img id="image1" data-photo="2" data-pos="left" class="coll-img left-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/engagement.jpg">
  </div>
  <div class="photo-box">
    <img id="image3" data-photo="3" data-pos="right" class="coll-img right-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/festival.jpg">
  </div>
  <div class="photo-box">
    <img id="image4" data-photo="4" data-pos="right" class="coll-img front-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/beach.jpg">
  </div>
  <div class="photo-box">
    <img id="image5" data-photo="5" data-pos="right" class="coll-img left-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/engagement.jpg">
  </div>
</div>

Please see below for JavaScript and CSS styling related to this section.

jquerycsscarousel

Answer №1

in the middle 

$("#collection-prev").click(function() {
    goToClicked($(".left-img").attr("data-photo"), 'left');
  });
  $("#collection-next").click(function() {
    goToClicked($(".right-img").attr("data-photo"), 'right');
  });

When you use $(".left-img") and $(".right-img") in previous and next, it will return two objects. You are only selecting the attr("data-photo") for the first one, so make sure to handle both elements properly within an array.

Answer №2

Update the image URL for the remaining pictures

 cphoto: "http://issi.tv/wp-content/uploads/2016/08/1Q9A0621.jpg",

inside the getCollection() method

The last 3 images share the same URL

As you are replacing the src attribute of the img tag with data from the getCollection function

imgDom.attr("src", o.cphoto);

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

Exploring the use of jQuery/JS for parsing and working with JSON

Hi everyone, I need some assistance with displaying data from an array created by a PHP file using JS/jQuery. Currently, I am working on implementing a points system for ZetaBoards which you can check out here. The points will be shown below the user' ...

phpjavascriptjqueryarraysjson

Every time a new modal is opened, the Bootstrap modal within the code seems to magically multiply itself

Hey there! I recently implemented a room password validation feature for the chat application I developed. To display the password input to users, I utilized Bootstrap's 4 modal. https://i.sstatic.net/4wJQp.png The modal is triggered using jQuery wi ...

javascriptjquerybootstrap-4modal-dialogbootstrap-modal

Concerns with the dimensions of HTML thumbnails

view image description here I seem to be having an issue with the size of thumbnails on my website. The problem arises when a thumbnail with a long title is displayed, as it ends up taking up more space and affecting the layout. Is there a solution to ens ...

htmlcss

Navigating to a Website Based on the Selected Option in a Drop-Down Menu

I am currently working on a form that includes options for selecting a city and social networking site. The goal is to collect information about both the selected city and social network so that it can be stored for future reference. Upon submitting the fo ...

javascripthtmlcss

What is the best way to navigate to the contact section after clicking on the "Contact Us" button within a modal?

I encountered a challenge in figuring out how to make it so that when I click "Contact us!" on my modal, it would not only close the modal but also scroll to the Contact Us part. However, with the method I currently have, it also scrolls when I press clo ...

javascriptjquerytwitter-bootstrapbootstrap-modalbootstrap-4

Removing the switcher outline in Bootstrap Switch: a step-by-step guide

I have implemented the bootstrap-switch - v3.3.1, however, I want to remove the default blue outline that appears around the switcher when toggling it on or off. Despite setting style="outline: 0 none; for the input, the outline remains visible. Below is ...

javascripthtmlcssbootstrap-switch

Using jQuery to delay hiding for 2 seconds

Hey there! I'm facing an issue with my code. The function is supposed to make #aboutPopOut slide to the left, and then after a 2-second delay, fade out the fadescreen by hiding it. The sliding part works fine, but the waiting and hiding do not seem to ...

javascriptjqueryhtmlcssweb

I am interested in incorporating jQuery into my React development project

I'm trying to implement jQuery in React. I have an input field in my project that I am using to create a match event with 'this.state.value'. When the content of the input field matches, I want the borders to turn green and red if they do no ...

javascripthtmljquerycssreactjs

CSS codes are ineffective when used simultaneously

Looking for help with my CSS code situation involving opacity on images: CSS for Opacity: .hover:hover { opacity:0.8;} HTML for Opacity: <a href="http://www.byggprojektoren.se"> <img class="hover" src="http://byggprojektoren.se/wp-content/u ...

htmlcsswordpressplugins

jQuery Masonry now renders "row blocks" as opposed to trying to fit elements into place

Have you ever heard of the jQuery masonry plugin? It's a great tool for placing images in "blocks" instead of trying to squeeze them into empty spaces. Take a look at this explanation: But how can we minimize those pesky "voids"? HTML: <!-- This ...

jquerycssjquery-masonryjquery-isotope

Utilize Bootstrap 3 Datepicker version 4 to easily set the date using Moment.js or Date objects

I'm currently utilizing the Within my project, I have a datetime picker labeled as dtpFrom <div class='input-group date ' id='dtpFrom'> <input type='text' class="form-control" /> <span c ...

javascriptjqueryhtmltwitter-bootstrap-3

When the button is clicked, refresh the row and column that corresponds to the user's

I have developed a checklist system that allows managers to create a list of products, which employees can then sign off on once they have completed them. Each product or material created is assigned a revision number. The layout can be seen below. https: ...

phpjquerymysqlajax

Using jquery to dynamically set the value of a drop down menu

I am struggling with a dropdown list that is being generated dynamically using ajax when the page loads. Additionally, I have a PHP variable that holds the default selected value. However, despite my attempts to select this value, it does not work as expec ...

phpjqueryhtmldrop-down-menu

Focus on different text fields individually, instead of all of them simultaneously, without relying on IDs

I haven't implemented this yet, but my plan is to use PHP to dynamically generate text fields based on user input. For example, if a user enters '3', they should see 3 text fields displayed for them to fill in. Instead of assigning individua ...

jqueryajax

How do I incorporate scrolling into Material-UI Tabs?

I am currently incorporating Material-ui Tablist into my AppBar component. However, I am facing an issue with the responsiveness of the tabs. When there are too many tabs, some of them become hidden on smaller screens. For more information on the componen ...

javascriptcssreactjsmaterial-uitabs

Understanding which page is being rendered through _app.js in React/Next.js is crucial for seamless navigation and

Currently, I am working on rendering my web navigation and footer on my _app.js file. My goal is to dynamically adjust the style of the navigation and footer based on the specific page being accessed. Initially, I considered placing the navigation and foot ...

javascripthtmlcssreactjsnext.js

Utilizing Jquery in the Customer Portal feature within the Salesforce platform

Struggling to incorporate a Visualforce page with Jquery UI and Salesforce Customer Portal. Unfortunately, Jquery UI seems to be taking precedence over the Standard Salesforce stylesheet. Is there a way to prevent this from happening? Any assistance on t ...

javascriptjqueryjquery-uistylessalesforce

Adjust and modify class when resizing the window

I've encountered a challenge with my Bootstrap Modal when trying to set the width to 750px on large desktops. When resizing the window to a smaller size, the modal loses its responsiveness. To tackle this, I added a class to the modal to give it a fix ...

jquerycssbootstrap-modal

Unexpected value assigned to private variable within a PHP class

Initially, the issue I am encountering originates from my PHP class that is called by a PHP file accessed through an AJAX call. The main problem lies in the fact that the return value does not align with the sybase_result value. What could possibly be mis ...

phpjavascriptjqueryclassprivate-methods

Utilize the requestAnimationFrame function to dynamically determine the size and color

My initial goal was to develop a program that generates a circle, gradually shrinking until it vanishes. This circle was supposed to continuously repeat this animation while transitioning between colors (starting from one color and ending in another). Al ...

javascriptjquerycolorsjquery-animaterequestanimationframe