📷 Content Slider (Images + Text)

A clean, responsive content slider that displays images with accompanying text captions, built using HTML, CSS, and JavaScript. Ideal for portfolios, product highlights, testimonials, or any section where you want to pair visuals with descriptive content.

---

🌐 Live Demo

👉 https://full-stack-web-developer-and-designer.github.io/content-slider/

---

🖼️ Screenshot

---

✨ Features

• 🖼️ Image Slides + Text Content (title + description or custom text)

• 📱 Fully responsive design

• 🎞️ Smooth slide transitions

• ⬅️➡️ Next and Previous navigation controls

• 💡 Clean and minimal layout

• 🪶 Lightweight — no libraries required

• 🎨 Easy to customize (colors, timing, layout, fonts)

---

🛠️ Technologies Used

• HTML5 – Structure for images + text slides

• CSS3 – Styling, layout, transitions

• JavaScript (Vanilla) – Slider

---

📂 Project Structure

content-slider/
│
├── index.html          # Demo page
├── style.css           # Styling for slider and captions
├── script.js           # Slider functionality
├── img/
|   ├── arrow-left.png
|   ├── arrow-right.png 
│   ├── slide1.jpg               # Slide images
│   ├── slide2.jpg            
│   └── slide3.jpg
└── README.md

---

📥 Installation

1. Download or clone the project:

   git clone https://github.com/full-stack-web-developer-and-designer/content-slider.git

2. Open index.html in your browser — the slider works immediately, no build tools or dependencies.

---

🚀 Usage

HTML Structure (example)

<div class="slider">
    <div class="slide active">
        <img src="images/slide1.jpg" alt="">
        <div class="caption">
            <h2>Slide Title 1</h2>
            <p>Description text for this image.</p>
        </div>
    </div>

    <div class="slide">
        <img src="images/slide2.jpg" alt="">
        <div class="caption">
            <h2>Slide Title 2</h2>
            <p>Another nice caption text.</p>
        </div>
    </div>

    <button class="prev">&#10094;</button>
    <button class="next">&#10095;</button>
</div>

Initialize the slider (JS)

// Already handled automatically on page load
initSlider();

---

🎨 Customization

You can freely modify:

• Image sizes

• Text captions (title, paragraph)

• Navigation button style

• Timing, transitions, animations

• Caption background (overlay, gradient, solid color)

• Fonts and layout

---

📄 License

This project is open-source — free to use, modify, or improve.

---

👤 Author

Mirnes Glamočić

Portfolio: https://mirnesglamocic.com