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

Block users from viewing the image displayed within a JavaScript canvas

On my server, I have a path to an image that is accessed by a JavaScript to load the image onto a canvas. The script then proceeds to hide certain parts of the image using black layers. The issue arises when a user can easily view my JavaScript code, extr ...

javascripthtmlcanvas

Can process.env.NODE_ENV be found within Azure App Service?

I am integrating NodeJS with my Angular application using ExpressJS. I came across an npm package called norobot that I want to install in order to utilize the process object. I need guidance on how and where to set the NODE_ENV in an App Service on Micro ...

javascriptnode.jsazureexpressazure-web-app-service

Why is my JQuery script not working in Internet Explorer 8? Getting an error message saying "Object doesn't support this property or method" - could this be a compatibility issue

On my HTML page, a jQuery script is causing an issue in IE8 specifically at this line: var dataCopy = JSONObject[event]; for (data in dataCopy) The error message I am receiving is: "Object doesn't support this property or method". Interestingly, the ...

jqueryinternet-explorer-8

Struggling with IE7 compatibility issues regarding tables inside a div? Seeking a reliable resource to gain insights and strategies for effectively resolving IE7 problems

I am currently in the process of revamping this website: but I am facing a challenge with repeating a gradient within a div (cnews). The problem arises when the gradient is repeated on IE7, as it distorts the color. It appears as though the blue in the im ...

htmlcssinternet-explorer-7

Using Ajax.ActionLink to pass a parameter in JavaScript

When I call a controller in this manner: @Ajax.ActionLink("Clients", "ClientAccountsPartialView", new { entityCode = -1, taxNumber = -1, country = 1, ...

javascriptc#asp.netasp.net-mvc-4

The issue with the Timber Ajax-cart drawer is that it fails to update the quantity of added or removed products

Check out my site: with the password set to "satin" I've integrated the Timber ajax-cart feature into my theme, but I'm facing an issue where the cart quantity doesn't update when clicking the "+" or "-" buttons in the drawer. Any help wo ...

jqueryajaxshopify

Confirm the validity of a data point within the JSON data package

When we send a request using the HTTP GET method, the API responds with the data. I need to ensure that the values of a specific input key match exactly what was specified in the GET URL. The URL that was used for the request: https://dummy.dns.com/Wells ...

javascriptjsonapijmeterjsonpath

Launching ng-app for AngularJS after the page has finished loading

After loading content with jQuery AJAX that includes ng-app="" and other directives, the AngularJS initialization does not occur. How can I initialize an ng-app that was added after the page has already been loaded? <script src="https://ajax.googleap ...

jqueryangularjsajax

Angular HTML is throwing an error related to object arrays

Is there a way to display only specific fields of an array? <div class="form-check" *ngFor="let periodo of filterPeriodos()"> <div>{{periodo.periodos | json}}</div> <input class="form-check-input mr- ...

javascripthtmlangular

Alpinejs Mega Menu Issue: Hover Functionality Glitchy

I'm working on a complex Mega Menu project that is activated upon hovering, using the powerful combination of Tailwind CSS and Alpinejs. The functionality is mostly there, but I've encountered some bugs along the way. Despite my attempts to impl ...

javascriptcssmenumegamenualpine.js

How can I protect my jQuery script from being accessed by "FIREBUG"?

I was tasked with creating a jQuery script as follows: function DeleteFile(_FileID) { //ajax method to delete the file } The FileID is stored in the 'rel' attribute of the list. However, when I call "DeleteFile" from Firebug using the fileId ...

javascriptjquerysecurityfirebug

Text input fields within a grid do not adjust to different screen sizes when placed within a tab

I noticed that my component under a tab is causing the Textfield to become unresponsive on small screens. To demonstrate this, I checked how the Textfield appears on an iPhone 5/SE screen size. https://i.stack.imgur.com/d8Bql.png Is there a way to make t ...

javascriptreactjsmaterial-ui

I am having trouble with Mpdf's block absolute positioning feature not functioning correctly

I am trying to position my block using absolute, but it seems to be staying in the same place regardless of the left/top attributes I set. Here is the PHP code snippet: $mpdf = new \Mpdf\Mpdf(); $mpdf->WriteHTML($stylesheet,\Mpdf\HT ...

phphtmlcssmpdfabsolute

Seeking assistance in the development of a visual depiction of device orientation through JS

My goal is to visually represent the device orientation values alpha, beta, and gamma by creating a series of "bars" for each value. Currently, I have managed to display only the values in plain text using innerHTML. However, I envision these bars moving i ...

javascriptcss

How can I send dynamic props between pages using Next.js?

I am currently exploring Next.js and attempting to create a page (index.js) that fetches data about different countries and then displays this information. I would like each country element displayed on the page to have a button that leads to another page ...

javascriptreactjsnext.js

What steps should I take to create a plugin for a library if defining it as a peerDependency does not provide a specific implementation for me to work with?

Requirements for My Plugin: I'm currently in the process of developing a new plugin that is dependent on popularLibrary.js. Here are the key points about my plugin: It will not function properly if popularLibrary.js is missing. It is designed to wo ...

javascriptnpmpeer-dependencies

Create custom AngularJS directives for validation and store them in a variable

Through the use of AngularJS, I've developed a directive called "integer" that invalidates a form if anything other than integers are entered. Because I'm generating the page dynamically by fetching data from the database, it would be helpful to ...

javascriptangularjs

Encountering an issue with my node configuration while working on a Discord bot

Attempting to develop my own Discord Bot has presented me with a challenging error that I am struggling to resolve: internal/modules/cjs/loader.js:968 throw err; ^ Error: Cannot find module './commands/${file}' Require stack: - C:\Users&bso ...

javascriptnode.jsdiscord.js

Could someone assist me in understanding why VScode is displaying an error stating it cannot locate a module?

node:internal/modules/cjs/loader:1051 throw err; ^ Error: The module '/Users/ben/Desktop/GA/unit2/week5/GA_Project_2/QuotaQuest/index.js' cannot be found. at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15) at Modul ...

javascripthtmlnode.jsmongodbexpress

Utilizing LocalStorage in an Ionic application to store data on a $scope

Having trouble saving the array named $scope.tasks to LocalStorage while building a To Do List app. Tried multiple times but can't figure it out. Here's the code, appreciate any help :^) index.html <!DOCTYPE html> <html> <head& ...

javascripthtmlangularjscordovaionic-framework