Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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