Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Kristian Woods
Kristian Woods
23,414 Points

How do I create a JQuery content slider?

Hey, I'm trying to create a image slider that has navigation arrows on either side, so the user can go move back and forth from the images.

I have created a div that has overflow: hidden - this div houses two more divs inside. Those divs contain images. I'm trying to make the two inner divs inline with each other. Then as the user clicks the arrow navigation, the images slide horizontally.

How do I accomplish this? I've seen Jquery plugins - Slick being one of them. But I'd like to create my own first before I use a plugin.

Thanks

<section class="active_section">
            <div class="img_container active_image_container">
               <div class="carousel_image">
                     <div class="mobile_overlay">
                      <h3>Glasgow Cathedral</h3>
                      <a href="#" class="more_info_link">More info</a>
                    </div>
                        <img src="img/ggow_cath.jpg" alt="Glasgow Cathedral" title="Glasgow Cathedral">
                </div>
                <div class="carousel_image">
                   <div class="mobile_overlay">
                   <h3>Tea Room</h3>
                   <a href="#" class="more_info_link">More info</a>
                   </div>
                    <img src="img/tea_room.jpg" alt=" cup of tea" title="Tea room" class="tea_room_img">
                </div>
                <div class="carousel_image">
                   <div class="mobile_overlay">
                   <h3>Kelvin Museum</h3>
                   <a href="#" class="more_info_link">More info</a>
                   </div>
                    <img src="img/kelvin.jpg" alt="Kelvin_museum" title="Kelvin_museum" class="kelvin_img">
                </div>
            </div>



            <button class="showHideBtn" type="button">Show More</button>

         <!--activities hidden images-->


        <div class="hiddenImages">

                   <div class="carousel_image">
                     <div class="mobile_overlay">
                      <h3>Glasgow Cathedral</h3>
                      <a href="#" class="more_info_link">More info</a>
                    </div>
                        <img src="img/ggow_cath.jpg" alt="Glasgow Cathedral" title="Glasgow Cathedral">
                </div>
                <div class="carousel_image">
                   <div class="mobile_overlay">
                   <h3>Tea Room</h3>
                   <a href="#" class="more_info_link">More info</a>
                   </div>
                    <img src="img/tea_room.jpg" alt=" cup of tea" title="Tea room" class="tea_room_img">
                </div>
                <div class="carousel_image">
                   <div class="mobile_overlay">
                   <h3>Kelvin Museum</h3>
                   <a href="#" class="more_info_link">More info</a>
                   </div>
                    <img src="img/kelvin.jpg" alt="Kelvin_museum" title="Kelvin_museum" class="kelvin_img">
                </div>

            </div>
        </section>

.active_section,
    .foodDrinks_section,
    .hotels_section {
        display: flex;
        overflow: hidden;
        height: 250px;
        white-space: nowrap;
        .img_container,
        .hiddenImages {
            display: inherit;
        }
        .carousel_image {
            width: 427.5px;
            margin-right: 10px;
        }
    }

I don't have any javascript at the moment