iScreenager / jjjjjjjjjj

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Card image cap

Sattva Park Cubix

DEvanahali, Benguular

Rs. 43.63 L
Proceed
<title>Infinite Slider</title> <style> .slider { display: flex; overflow-x: scroll; scroll-behavior: smooth; }
    .card {
        width: 25rem;
        margin-right: 1rem;
    }
    
    .card-img-top {
        height: 200px;
        object-fit: cover;
    }
    
    .card-body {
        padding: 1rem;
    }
</style>
Card image cap

Sattva Park Cubix

Devanahalli, Bengaluru

Rs. 43.63 L
Proceed
    <!-- Add more card elements here -->
    
</div>

<script>
    // Infinite slider logic
    const slider = document.querySelector('.slider');
    const cards = document.querySelectorAll('.card');
    const cardWidth = cards[0].offsetWidth;
    const previousButton = document.createElement('button');
    const nextButton = document.createElement('button');
    
    previousButton.innerHTML = '&lt;'; // Previous icon
    nextButton.innerHTML = '&gt;'; // Next icon
    
    previousButton.addEventListener('click', () => {
        slider.scrollBy(-cardWidth, 0);
    });
    
    nextButton.addEventListener('click', () => {
        slider.scrollBy(cardWidth, 0);
    });
    
    slider.appendChild(previousButton);
    slider.appendChild(nextButton);
</script>

About