Can anyone tell me what I’m doing wrong here? I have a carousel that I want the slides to change based on various buttons being clicked. A button gets clicked, carousel goes to corresponding slide. I have this set up on another page with a drop down menu. This time, I’m trying to use individual buttons. I can’t seem to get the text to display though, only the buttons. Currently, I have it set up with just the text for the first button. I haven’t put in the text for the other buttons yet. Also, the css I have below was to layout the text in a certain area from how I had it set up before. I have tried commenting it all out to see if it was affecting it being displayed or not. Including it now just so you guys can see everything I’m working with.
HTML:
<div id="carousel">
<div id="myCarousel" class="carousel" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div id="missionstatement2">
<div class="vision">
<h3>Vision</h3>
</div>
<div class="missionP1">
<p>
To lead the supply chain services industry through the delivery of high quality service and manufacturing solutions,
<br />while maximizing strategic value to our customers by exceeding expectations and facilitating growth.
</p>
</div>
<div class="mission">
<h3>Mission</h3>
</div>
<div class="missionP2 ">
<p>
SC2, a 100% employee‐owned company, represents a promise to deliver high quality, on time, cost‐effective supply‐chain
<br /> Solutions—offering customized services from a team that is committed to excellence.
</p>
</div>
</div>
</div>
</div>
<div>
<button class="btn btn-primary" type="button" data-slide-to="0">
Mission Statement
</button>
</div>
<div class="dropdown">
<button class="btn btn-primary" type="button">
ESOP
</button>
</div>
<div class="dropdown">
<button class="btn btn-primary" type="button">
SC2 Difference
</button>
</div>
<div class="dropdown">
<button class="btn btn-primary" type="button">
Our History
</button>
</div>
</div>
</div>
If I copy the code that you posted to a file and open that file in my browser, will it demonstrate the problem?
Because I see several classes with no corresponding CSS, I doubt that it will. Which means that we do not have access to all of the code affecting the slider.
You can remedy this in one of three ways:
(1) post a link to your test site.
(2) create a CodePen that demonstrates the problem.
(3) create a “working page” and attach or include it in a post so we can copy it to our computers and see the problem in action.
With access to the complete code, we can help you troubleshoot the issue.
Personally, I prefer a “working page” because I have to create one anyway to work on your code, but the choice is up to you. Complete, relevent code, is the key.
If you have not read our posting guidelines, please do.
But it does not show the carousel. I don’t know how to get the carousel on there to show you properly what it’s doing. I have now got it working to an extent. It shows the 1st and 3rd slide, but for whatever reason does not display the 2nd and 4th slides. Also, I can’t get it to stop switching slides automatically. Lastly, I am trying to get the 2 divs “left” and “right” side-by-side on the 3rd slide, but nothing I do seems to work.
I understand that but I don’t have a working page, and all the code is in the codepen. If I was as good as web development as half the people on here, I probably wouldn’t need to be asking the question I’m asking, so I’m sorry if I can’t post up to the standards you would like, but I’m doing the best I can. Other times when I have posted non-working code pens, some one with more experience has sometimes been able to look at it and figure out what I did wrong to make it work the way I had intended, and then to proceed to solve the problem. Yes, I need assistance with the carousel. No, I can’t get it to work with the codepen. Why? I have no idea. I included bootstrap in it, so I don’t know what else to do to get it to work.
Ok. I am going to have to excuse myself from this topic, then. Hopefully someone with more insight and experience that I possess will jump it and help. Sorry.
You hadn’t linked to the bootstrap 3 css and js. Go into settings and select the css tab and then select bootstrap 3 from the quick add select control. Do the same for the js tab.
The carousel will then run on codepen.
I’m on a mobile at the moment so can’t debug properly and will look tomorrow.
I gave you the answer to that in your other thread and you need to remove the data-ride attribute.
I did this and thought it had fixed it. Came in today and ran the site. It’s still sliding. When I go to the dev tools and inspect the live code, the data-ride attribute is not in there anywhere. I don’t know it’s moving.
Also, when I fixed the codepen, I not get the carousel, but it is displaying all the slides. For some reason, on my actual project, it only displays the first and third slides. Slides two and four don’t show up. And it’s not like it has an empty slot for them. It just skips them entirely and goes directly to slide 3 or slide 1. The code is exactly the same. I’m not sure what else would be effecting that to get that behavior.
