Highlighted

Change content in div on a cycle

Participant ,
Mar 19, 2018

Copy link to clipboard

Copied

I'm not really sure how to describe what I'm trying to ask, so I'm going to add a link to an example. http://github.hubspot.com/odometer/docs/welcome/#4

Odometer — Transition numbers with ease

As you can see the information rotates. I don't mean the actual numbers, I mean the content. For example, it rotates from saying "Minutes of TV watched" to "Minutes Snoozed". Basically, I'm just trying to figure out how to do that. I can't even begin to google a tutorial as I can't even think of how to structure the question.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Below are 2 live demos of the Bootstrap Carousel Slider.  View page source to see the code.

Bootstrap 3.3.7 Default Carousel Slider

Bootstrap 3.3.7 Custom Carousel with Fade

For something with more WOW factor, look at Wow Slider.

http://wowslider.com/

Nancy

Views

202

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Change content in div on a cycle

Participant ,
Mar 19, 2018

Copy link to clipboard

Copied

I'm not really sure how to describe what I'm trying to ask, so I'm going to add a link to an example. http://github.hubspot.com/odometer/docs/welcome/#4

Odometer — Transition numbers with ease

As you can see the information rotates. I don't mean the actual numbers, I mean the content. For example, it rotates from saying "Minutes of TV watched" to "Minutes Snoozed". Basically, I'm just trying to figure out how to do that. I can't even begin to google a tutorial as I can't even think of how to structure the question.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Below are 2 live demos of the Bootstrap Carousel Slider.  View page source to see the code.

Bootstrap 3.3.7 Default Carousel Slider

Bootstrap 3.3.7 Custom Carousel with Fade

For something with more WOW factor, look at Wow Slider.

http://wowslider.com/

Nancy

Views

203

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 19, 2018 0
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

You are looking for a "carousel slider" or "jquery carousel slider" there are 1000's of them all over the internet, with varying levels of difficulty to implement.

What kind of code experience do you have?
Are you using Bootstrap within DW by chance?
Are you currently using any jQuery library on your site?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
Participant ,
Mar 19, 2018

Copy link to clipboard

Copied

I tried a carousel thinking that would be the easiest way to accomplish it, but my content didn’t display when I put it in the bootstrap carousel I always use. I assumed that just wouldn’t work for what I needed. I’ll go back and try from scratch and see if there was just a conflict in the code.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
Adobe Community Professional ,
Mar 20, 2018

Copy link to clipboard

Copied

Below are 2 live demos of the Bootstrap Carousel Slider.  View page source to see the code.

Bootstrap 3.3.7 Default Carousel Slider

Bootstrap 3.3.7 Custom Carousel with Fade

For something with more WOW factor, look at Wow Slider.

http://wowslider.com/

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2018 0
Participant ,
Mar 20, 2018

Copy link to clipboard

Copied

Thanks Nancy. Love the wowslider! I actually got it to work with a standard bootstrap carousel. I just didn't notice the code had slightly changed when I updated my Dreamweaver the other day. The new bootstrap 4.0 added a few things to the carousel and when I was altering it I just messed it up.

Thanks for the suggestions though. I'm bookmarking them!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2018 0