I recently updated a Content Slider and tweaked the styles to my preference.
Check out the changes I made on this link.
In addition, I included an extra Thumbnail Picture on the right (7th one) along with the Main Picture.
Oddly enough, the Slider seems to be skipping over this particular Thumb Pic - any ideas why?
Looks like there may be an issue with the way you are counting. Here's a suggestion to rectify the problem:
// ... *snip*
theInt = setInterval(function() {
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 7 == curclicked )
curclicked = 0;
}, 3000);
};
// *snip* ...
Take note that I have made a modification to the line if(6 == curclicked) which now resets to zero when the number of clicked thumbs is greater than the total thumbnails available (i.e. verify if it's 7 instead of 6) rather than just being equal.
You possess a total of seven images, yet instruct it to switch back to the first image after viewing the initial six.
curclicked++;
if( 6 == curclicked )
curclicked = 0;
If you modify the number to 7 instead of 6, the functionality will be as desired.
I have encountered a slight issue. I created a Sidebar Navigation with some added "hey's" to demonstrate the problem: * { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } nav { height: 100vh; width: 250px; borde ...
After the recent resolution of the WebKit page-zoom bug, what are the primary benefits of utilizing em-based media queries over pixel-based ones? Incentive I am offering a reward for my question as many prominent CSS frameworks and web developers use em- ...
Implementing a fade-in effect for a button as the user scrolls down and the button comes into view, along with a fade-out effect as the user continues scrolling down and the button goes out of view. var fadeInButton = $('#fadeInButton'); ...
I have attempted to modify this code to change the background color of li tag on click. It successfully changes the background color when hovering or clicking, but unfortunately reverts back to the default color upon page refresh. I am looking for a soluti ...
Check out the code snippet at http://jsfiddle.net/jN5G4/1/ Is there a way to align the drop-down menu for "5 Columns" to match the alignment of the other drop-downs? After removing the <a href...> </a> tags from the 5 Columns list item, the d ...
I am looking to create a hover effect for links that remains active when the user is on a specific page. Essentially, I want a background to appear behind the link when it is visited. Below is the HTML code: <div class="menudiv"> <div id="menu"& ...
I have been attempting to set up the code in a way that the page automatically changes using setTimeout. However, I am unable to make it work. setTimeout()(page3, 500); function page3() { changepage3('automatic') } Even though my code is str ...
When a user clicks on a link to slide the div down, I want it to automatically scroll to the bottom of the div. I've attempted to use scrollTo and animate methods to achieve this effect. $('html, body').animate({ scrollTop: $("#elementID") ...
I've implemented a responsive grid where each item has its own hidden details section that is revealed upon clicking the item. The structure of the HTML/CSS setup is as follows: <div class="grid"> <div class="item"> ...
I've been trying to incorporate my own icon for the material UI select component. I successfully replaced the default icon using the "IconComponent" attribute in MU select. However, I'm facing issues with the new icon not rotating when the menu ...
My attempt to create a header that fades with scroll and appears on hover is working perfectly, except for the cat pictures in the Portfolio section. Despite adjusting z-indexes and trying various solutions, the header just won't show up over the h4 e ...
My website features a floating box on the side of the page (Parent div) housing a child div with a position:sticky property that scrolls along with the page as it reaches the top of the viewport. See it in action here: https://codepen.io/Xanthippus480/pen/ ...
My current setup involves using JQuery's show and hide function. Essentially, when an image is clicked, it triggers the display of an information log. The issue I am facing is that this log opens at the top of the page, whereas I would like it to scro ...
I'm currently working on building a modal using Tailwind in Vue, but I've run into some challenges with aligning the elements inside the modal as desired. I've experimented with removing certain Tailwind classes and have tried implementing ...
Once upon a time, I built a beautiful website while practicing HTML, CSS, and JS. It had multiple web pages and used Express for the backend. Unfortunately, I lost all the files associated with it and took a break from web programming for some time. Now, w ...
When the body is used as the wrapper instead of a div, the content shifts eight pixels to the left (on a 1920×1080 display) when it extends below the fold. The examples below illustrate this difference in code snippets. Please note that the variance is on ...
Imagine that I have the JSON data below: [ { month: "Jan", cost: 80, energy: 90 }, { month: "Feb", cost: 50, energy: 80 }, { month: ...
Having trouble with my date picker component (v-date-picker) where I can't seem to get the icon, a Font Awesome Icon separate from the date-picker, to open the calendar on focus when clicked. I've attempted some solutions mentioned in this resour ...
Currently, I have a large grid made up of divs that display different sections of an image. By using background-image and background-position, I am able to showcase parts of the image. However, one issue is that users can easily view the complete image by ...
In my current setup, I am attempting to customize radio buttons and checkboxes. Array.from(document.querySelectorAll("tr")).forEach((tr,index)=>{ var mark=document.createElement("span"); Array.from(tr.querySelectorAll("input")).forEach((inp,index ...