javascript - How to apply a carousel effect to a table in Bootstrap? - Stack Overflow

admin管理员组

文章数量:1389762

We can make table scrollable by adding table-responsive class to it, but how can we loop it so that once the loop ends, first column will follow the last column as if it is the adjacent column. (this doesn't happen when we apply marquee)

We can make table scrollable by adding table-responsive class to it, but how can we loop it so that once the loop ends, first column will follow the last column as if it is the adjacent column. (this doesn't happen when we apply marquee)

• javascript
• jquery
• html
• css
• twitter-bootstrap-3

Share Improve this question Follow edited Jun 29, 2016 at 20:10 Hozeis 1,7521818 silver badges3939 bronze badges asked Jun 29, 2016 at 18:19 Sandeep C. NathSandeep C. Nath 92711 gold badge1010 silver badges2323 bronze badges 4

• Do u mean to freeze the 1st column and make the follow when ur scrolling? – Shank Commented Jun 29, 2016 at 18:22
• Sorry, no. I meant that I need to scroll the whole list in a loop, without any delay. – Sandeep C. Nath Commented Jun 29, 2016 at 18:25
• @Shank i think he wants something "like" a Carousel effect on the table. – Hozeis Commented Jun 29, 2016 at 18:25
• I believe bootstrap itself does not e with this functionality. Not sure of any libraries that are capable of doing this either. Try coding it yourself, post your code if you need help. – Hozeis Commented Jun 29, 2016 at 18:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Im not sure this is what you were looking for, but it sounded like a cool idea. Heres what I came up with for a "Carousel Effect on a Table" (which is what i think you were asking). Run the code snippet to see the effect. You might need to alter the css a little to get a seamless scroll effect.

var $table = $('.table-wrapper table');

var leftTimeout, left = $('.left');

function scrollLeft(){
	$('.table-wrapper').scrollLeft($('.table-wrapper').scrollLeft()-50);
	$.each($table.find('tr'),function(){
		$(this).children().last().detach().prependTo(this);
	});
}

left.mousedown(function(){
	scrollLeft();
    leftTimeout = setInterval(function(){
    	scrollLeft();
    }, 500);

    return false;
});
$(document).mouseup(function(){
    clearInterval(leftTimeout);
    return false;
});

var rightTimeout, right = $('.right');

function scrollRight(){
	$('.table-wrapper').scrollLeft($('.table-wrapper').scrollLeft()+50);
	$.each($table.find('tr'),function(){
		$(this).children().first().detach().appendTo(this);
	});
}

right.mousedown(function(){
	scrollRight();
    leftTimeout = setInterval(function(){
    	scrollRight();
    }, 500);

    return false;
});
$(document).mouseup(function(){
    clearInterval(rightTimeout);
    return false;
});

.table-wrapper
{    	
    border: 1px solid red;
    width: 200px;
    height: 150px;        
    overflow:hidden;
}

table
{
    border: 1px solid black;
    margin-right: 20px;
}

td
{
    min-width: 50px;
    height: 20px;
    background-color: #ccc;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table-wrapper">
    <table>
        <tr>
        	<th>1h</th>
            <th>2h</th>
            <th>3h</th>
            <th>4h</th>
            <th>5h</th>
            <th>6h</th>
            <th>7h</th>
            <th>8h</th>
            <th>9h</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>      
</div>

<button class='left'><</button>
<button class='right'>></button>

本文标签： javascriptHow to apply a carousel effect to a table in BootstrapStack Overflow