Tips for optimizing Slider Code to showcase an expanded selection of slides

I am currently troubleshooting a slider code on my ASP.NET website. After examining the HTML, JS, and CSS from the page theme, I noticed that only two slides are being displayed. However, when attempting to add a new slider HTML and adjusting the CSS for the new slide, the third slide is not appearing at all.

Any suggestions or ideas would be greatly appreciated. Thank you!

<script type="text/javascript">
$(function () {
$(".camp-tabs").r2iTabs(".camp-slides > .camp-slide", {
effect: 'fade',
fadeOutSpeed: "slow",
rotate: true
}).r2iSlideshow({clickable: false, autoplay: true, interval: 6000});
$(".promo-scrollable").r2iScrollable({
circular: true,
itemsPerFrame: '3',
next: '.promo-next',
prev: '.promo-prev'
});
$('.promo-box').mouseenter(function() {
$(this).children('.promo-bot').slideDown('fast');
}).mouseleave(function() {
$(this).children('.promo-bot').slideUp('fast');
});
$('.promo-items').mouseenter(function() {
$(this).parents('.promos').css({'z-index': 1000});
}).mouseleave(function() {
$(this).parents('.promos').css({'z-index': 1});
});
$("#twitterScrollable").r2iScrollable({
circular: true,
itemsPerFrame: '1',
next: '.test-next',
prev: '.test-prev'
}).r2iAutoscroll({autoplay:true, interval:6000});

$("#highlightScrollable").r2iScrollable({
circular: true,
itemsPerFrame: '1',
next: '.test-next',
prev: '.test-prev'
}).r2iAutoscroll({autoplay:true, interval:6000});
$('#formOverlay').r2iOverlay({
mask: {
opacity: .7,
color: '#000',
loadSpeed: 500,
id: '#videoOverlayMask'
}
});

});
</script>
/*--- SLIDER---*/
.camp-wrap {position:relative;}
.camp-wrap .camp-slides {position:relative; height:400px;}
.camp-wrap .camp-slides .camp-slide {position:absolute; top:0; left:0; width:100%; display:none;}
.camp-wrap .camp-slides .camp-slide img {position:absolute; left:50%; margin:0 0 0 -1220px; top:0;}
.camp-wrap .camp-slides .camp-slide .camp-text {z-index:2; position:relative; text-align:center; padding:128px 0 0; margin:0 auto;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-still {width:790px; padding-top:75px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-it {width:740px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-pro {width:930px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-serv {width:1090px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-fed {width:950px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-byod {width:860px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-carrier {width:840px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-euc {width:760px;}
.camp-wrap .camp-slides .camp-slide .camp-text .camp-sm {background:url(images/shade.png) repeat; color:#fff; font-family: 'Source Sans Pro', sans-serif; font-weight:700; font-size:25px; height:50px; line-height:50px; padding:0; margin:0 auto 10px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-still .camp-sm {width: 180px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-byod .camp-sm {width: 220px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-carrier .camp-sm {width: 280px;}

.camp-wrap .camp-slides .camp-slide .camp-text.camp-euc .camp-sm {width: 280px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-it .camp-sm {width:480px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-pro .camp-sm {width:550px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-serv .camp-sm {width:350px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-fed .camp-sm {width:685px;}
.camp-wrap .camp-slides .camp-slide .camp-text .camp-lg {background:url(images/shade.png) repeat; color:#fff; font-family: 'Source Sans Pro', sans-serif; font-weight:700; text-transform:uppercase; font-size:72px; height:88px; line-height:88px; padding:0; margin:0 0 10px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-still .camp-lg {font-size: 72px;height: auto;line-height: 72px;
}
.camp-wrap .camp-slides .camp-slide .camp-text .camp-lg-carrier {background:url(images/shade.png) repeat; color:#fff; font-family: 'Source Sans Pro', sans-serif; font-weight:700; text-transform:uppercase; font-size:50px; height:68px; line-height:68px; padding:0; margin:0 0 10px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-still .camp-lg-carrier {font-size: 50px;height: auto;line-height: 68px;
}
.camp-wrap .camp-slides .camp-slide .camp-text a:link,
.camp-wrap .camp-slides .camp-slide .camp-text a:visited,
.camp-wrap .camp-slides .camp-slide .camp-text a:active {display:block; float:right; background:url(images/shade-hov.png) repeat-x 0 0; font-size:16px; color:#fff; font-family: 'Source Sans Pro', sans-serif; font-weight:700; line-height:32px; height:32px; padding:0 16px 0 20px;}
.camp-wrap .camp-slides .camp-slide .camp-text a:hover {background:url(images/shade-hov.png) repeat-x 0 bottom;}
.camp-wrap .camp-slides .camp-slide .camp-text a span {display:block; height:32px; background:url(images/arrow-white.png) no-repeat right center; padding-right:18px;}
.camp-wrap .camp-tabs {display:none;}
.camp-wrap .arrow {display:block; width:36px; height:40px; position:absolute; top:180px; background:url(images/arrow-camp.png) no-repeat; z-index:1000; cursor:pointer;}
.camp-wrap .backward {left:0; background-position:0 0;}
.camp-wrap .forward {right:0; background-position:-36px 0;}
.camp-wrap .backward:hover {background-position:0 -40px;}
.camp-wrap .forward:hover {background-position:-36px -40px;}<code></pre>
<pre><code><div class="campaign">
    <div class="camp-wrap"> <a class="backward arrow"></a>
      <div class="camp-slides">
        <div class="camp-slide">
          <div class="camp-text camp-euc">
            <div class="camp-lg">Lorem ipsum</div>
            <div class="camp-sm">Lorem ipsum</div>
            <a href="/helloworld.aspx"><span>Learn More</span></a> </div>
          <img src="<%= SkinPath %>images/banner01" alt="" /> </div>
        <div class="camp-slide">
          <div class="camp-text camp-carrier">
            <div class="camp-lg-carrier">Lorem ipsum</div>
            <div class="camp-sm">Lorem ipsum</div>
            <a href="/hellospace.aspx"><span>Learn More</span></a> </div>
          <img src="<%= SkinPath %>images/Careers-01.jpg" alt="" /> </div>
      </div>
      <a class="forward arrow"></a>
      <div class="camp-tabs"><a href="#">&nbsp;</a><a href="#">&nbsp;</a></div>
    </div>
  </div>

javascriptjqueryhtmlcss

Answer №1

I realized I had overlooked an important detail. When creating a new slide, I mistakenly added a div container:

      <div class="camp-slide">
      <div class="camp-text camp-euc">
        <div class="camp-lg">Lorem ipsum</div>
        <div class="camp-sm">Lorem ipsum</div>
        <a href="/thirdslide.aspx"><span>Learn More</span></a> </div>
      <img src="<%= SkinPath %>images/thirdslide.jpg" alt="" /> </div>

However, I failed to update the camp-tabs section.

<div class="camp-tabs"><a href="#">&nbsp;</a><a href="#">&nbsp;</a><a href="#">&nbsp;</a></div>

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

FusionCharts Gauges may share similar code, but each one produces a unique output

Currently, I am developing a project that involves creating a dashboard with 3 gauges. These gauges are enclosed in bootstrap cards with a column value set to 4. In the layout of the dashboard, these 3 cards are positioned next to each other. I have succe ...

javascripthtmllaravel

Is it possible to do bulk deletion in Flask Restless using AngularJS or JavaScript?

I am trying to implement bulk delete functionality in my AngularJS application by making an HTTP request to a Flask Restless API with version 0.17.0. While I know how to delete records one by one using their IDs in the URL, I am unsure if it is possible to ...

javascriptpythonangularjsflaskflask-restless

Methods for adding a new object to an array in Angular: Explained

How can I insert a new object in Angular? Here is the current data: data = [ { title: 'Book1' }, { title: 'Book2' }, { title: 'Book3' }, { title: 'Book4' } ] I would like to update the obje ...

javascripttypescript

Incorporating jQuery tooltips within a dynamically refreshing jQuery div

Having trouble with jQuery tooltips (using Tipsy) on a dynamically included page. The tooltips work well on regular pages, but when I include the page through PHP and set up auto-refresh using jQuery, the tooltips stop working properly. The issue seems to ...

phpjavascriptjquerytooltiptipsy

Arranging blocks within blocks? Placing additional text underneath a block

Looking to append some text at the end of a block called .label. Inside this block, there is a sub-element called .label_title, and below that is a picture/link enclosed in another block. Under the picture/link, I wish to include a short description while ...

cssblock

How to modify the color of the placeholder text in a select dropdown using Material-ui

I have a material-ui select component that displays a dropdown menu of options for the user to choose from. The placeholder text, which currently reads "select option," appears in light grey to prompt the user to make a selection. However, I am concerned t ...

javascriptmaterial-ui

sidebar that appears upon the initial page load

I'm currently working on implementing a sidebar navigation panel for my website using JavaScript, HTML, and CSS. However, I am facing an issue where the sidebar automatically opens when the page is first loaded, even before clicking on the icon to ope ...

javascripthtmlcssnavigationsidebar

Flag form field as invalid in AngularJS

Struggling to implement server-side form validation in an AngularJS app? Finding it tricky to invalidate a form field and show an error message? Here's the setup of my app: I have a model 'client' with a controller Accounts.controller(&ap ...

javascriptangularjs

The JavaScript slideshow fails to display an image during one rotation

The slideshow displays a sequence of images from pic1.jpg to pic8.jpg, followed by a 4-second pause with no image, and then repeats starting again at pic1.jpg. I am looking to have it loop back to pic1.jpg immediately after displaying pic8.jpg. Below is t ...

javascripthtml

What is the best way to initiate a TouchEvent in a qunit test being run by grunt using only vanilla JavaScript?

I have implemented callbacks for different touch events that require testing. For example, the 'touchstart' event utilizes touch coordinates to configure a class member: NavigationUI.prototype.touchStart = function(evt) { this.interacting = ...

javascriptnode.jsunit-testinggruntjsqunit

Splitting your screen in a 10/90 column ratio using React

I am looking to split my screen into a 10/90 ratio of the total screen space. // Here is what I have attempted: return ( <> <div class="row"> <div className="col-md-4" > ; <div class="le ...

htmlreactjsmaterial-ui

"Crafting a sleek card design using Material UI components in React JS

Exploring the world of material UI and looking to create a card with an image and footer. However, I'm facing challenges as there is no default option for adding a footer in the card. https://i.stack.imgur.com/xlxyb.png I want the image to be center ...

cssreactjsmaterial-ui

Combine the values of two fields in real-time on a Model-View-Controller Edit form

One challenge I am facing is within an MVC Edit form that contains two fields named ExVAT and VAT. I would like to introduce a new field that displays the total of these two values. Currently, the total only reflects the sum of the two fields upon initial ...

javascriptc#asp.net-mvc

Is there a way to run a node script from any location in the command line similar to how Angular's "

Currently, I am developing a node module that performs certain functions. I want to create a command similar to Angular's ng command. However, I am facing compatibility issues with Windows and Linux operating systems. Despite my attempts to modify the ...

javascriptnode.jsangularcommand-line

What caused Safari to only show half of the page?

Whenever I browse my website using Safari, I noticed that if the total size of the content on the first page is less than 100vh, Safari ends up cutting off half of the page. To fix this issue, I added a CSS rule in the body setting min-height to 110vh wh ...

cssreactjsnext.jssafari

Selecting middleware to be executed based on Express JS request parameters

Can someone please advise me on how to select between two distinct middleware functions, based on the request for a specific endpoint? It may involve something along these lines: router.post("/findAvailableAgents", chooseMiddleware(middleware1, ...

javascriptnode.jsexpress

What is the best way to include an API key in the response to an Angular client application?

I'm working on transferring my API key from NodeJS to an Angular client application using $http, but I am unclear on the approach. Below is a snippet from my NodeJS file: // http://api.openweathermap.org/data/2.5/weather var express = require(' ...

javascriptangularjsnode.jsexpress

Ways to style CSS for inactive checkboxes?

How can I easily change the CSS for disabled checkboxes in a grid to make them more visible for users? Technologies I prefer to use, ranked from most preferred to least: CSS JavaScript jQuery Other ...

htmlcsscheckbox

Pressing JavaScript buttons to trigger another button

I am looking to develop a script that generates a button which then creates another button. The subsequent button will be assigned an id attribute by incrementing from 1 to infinity. This feature should apply to all buttons (original button and the newly ...

javascripthtmlbutton

Incorporate a 'Select All' functionality into ion-select by adding a dedicated button

Looking for a way to set custom buttons on ion-select through interfaceOptions in ionic 4? HTML <ion-item> <ion-label>Lines</ion-label> <ion-select multiple="true" [(ngModel)]="SelectedLines" [interfaceOptions]="customAlertOption ...

htmltypescriptionic-frameworkionic4