Slick.js syncing multiple slider navs

Slick.js syncing multiple slider navs - javascript

I have an event website where I want to display 12 events with slider. I want two sections (speakers and schedule) to act as slider showing single event content and using slider navigation (with arrows and numbers) to control both of them.
Using Slick.js I was able to achieve this with single slider nav, but when I duplicate the slider nav - one slider nav didn't work correctly (arrows work but numbers don't).
Is there a way to in Slick.js to set this to work, or if there isn't can someone help me get workaround with JavaScript/jQuery?
Demo can be tested here:
demo
Here is my code:
$('.slickSliderWrap').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
adaptiveHeight: true,
asNavFor: '.day-wrap'
});
$('.day-wrap').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slickSliderWrap',
centerMode: true,
centerPadding: '10px',
prevArrow: '.dayArrow--left',
nextArrow: '.dayArrow--right',
focusOnSelect: false
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="speakers">
<div class="agenda-wrap">
<div class="nav-wrap">
<button class="dayArrow dayArrow--left">
</button>
<div class="day-nav">
<div class="day-wrap slider-nav">
<button class="btn-day active">E01</button>
<button class="btn-day">E02</button>
<button class="btn-day">E03</button>
<button class="btn-day">E04</button>
<button class="btn-day">E05</button>
<button class="btn-day">E06</button>
<button class="btn-day">E07</button>
<button class="btn-day">E08</button>
<button class="btn-day">E09</button>
<button class="btn-day">E10</button>
<button class="btn-day">E11</button>
<button class="btn-day">E12</button>
</div>
</div>
<button class="dayArrow dayArrow--right">
</button>
</div>
</div>
<div class="speaker-list-wrap slickSliderWrap">
<!-- event 01 list -->
<div class="speaker-list">
<!-- speaker item -->
<!-- speaker item -->
...
<!-- speaker item -->
</div>
<!-- event 02 list -->
<div class="speaker-list">
<!-- speaker item -->
<!-- speaker item -->
...
<!-- speaker item -->
</div>
...
<!-- event 12 list -->
<div class="speaker-list">
<!-- speaker item -->
<!-- speaker item -->
...
<!-- speaker item -->
</div>
</div>
</div><!-- /speakers -->
<div id="schedule">
<div class="agenda-wrap">
<div class="nav-wrap">
<button class="dayArrow dayArrow--left">
</button>
<div class="day-nav">
<div class="day-wrap slider-nav">
<button class="btn-day active">E01</button>
<button class="btn-day">E02</button>
<button class="btn-day">E03</button>
<button class="btn-day">E04</button>
<button class="btn-day">E05</button>
<button class="btn-day">E06</button>
<button class="btn-day">E07</button>
<button class="btn-day">E08</button>
<button class="btn-day">E09</button>
<button class="btn-day">E10</button>
<button class="btn-day">E11</button>
<button class="btn-day">E12</button>
</div>
</div>
<button class="dayArrow dayArrow--right">
</button>
</div>
</div>
<div class="agenda-content-window">
<div class="agenda-content-wrap slickSliderWrap">
<!-- event 01 list -->
<div class="agenda">
<!-- agenda item -->
<!-- agenda item -->
...
<!-- agenda item -->
</div>
<!-- event 02 list -->
<div class="agenda">
<!-- agenda item -->
<!-- agenda item -->
...
<!-- agenda item -->
</div>
...
<!-- event 12 list -->
<div class="agenda">
<!-- agenda item -->
<!-- agenda item -->
...
<!-- agenda item -->
</div>
</div>
</div><!-- /schedule -->

I played around a bit and came up with a working version. I wanted to trim it down to make for a simpler example, so it only includes one set of nav & speakers.
$(function() {
$('.day-wrap').slick({
slidesToShow: 3,
slidesToScroll: 1,
centerPadding: '10px',
centerMode: true,
prevArrow: '.dayArrow--left',
nextArrow: '.dayArrow--right',
asNavFor: '.speaker-list-wrap'
});
$('.speaker-list-wrap').slick({
slidesToShow: 1,
arrows: false
});
// asNavFor works when scrolling
// Add onclick to buttons to navigate speakers
$('.btn-day').on('click', function() {
$('.speaker-list-wrap').slick('slickGoTo', $(this).attr('data-slick-index'));
});
});
#speakers,
.speaker-list,
.nav-wrap {
width: 300px;
}
.day-wrap {
width: 300px;
overflow: hidden;
}
.speaker-list,
.speaker-list-wrap,
.speaker-list-item {
width: 300px;
}
.speaker-list {
margin-top: 30px;
height: 40px;
border: 1px solid gray;
}
.speaker-list-wrap {
overflow: hidden;
}
.speaker-list-item {
float: left;
}
.btn-day {
width: 50px;
height: 20px;
float: left;
border: 1px solid blue;
margin: 0 5px;
text-align: center;
}
.btn-day.slick-current {
color: white;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.0/slick.min.js"></script>
<html>
<head></head>
<body>
<div id="speakers">
<div class="agenda-wrap">
<div class="nav-wrap">
<button class="dayArrow dayArrow--left"><</button>
<div class="day-nav">
<div class="day-wrap slider-nav">
<div class="btn-day active">E01</div>
<div class="btn-day">E02</div>
<div class="btn-day">E03</div>
<div class="btn-day">E04</div>
<div class="btn-day">E12</div>
</div>
</div>
<button class="dayArrow dayArrow--right">></button>
</div>
</div>
<div class="speaker-list">
<div class="speaker-list-wrap">
<div class="speaker-list-item">Speaker 1</div>
<div class="speaker-list-item">Speaker 2</div>
<div class="speaker-list-item">Speaker 3</div>
<div class="speaker-list-item">Speaker 4</div>
<div class="speaker-list-item">Speaker 12</div>
</div>
</div>
</div>
<!-- /speakers -->
</body>
</html>

Related

How to change CSS on click?

I have 4 cards which contain data. I want when first header text card is clicked, it expand upward, and info I displayed and when clicked the same card it hide the body but the rest card stays the same,
Here is visual of what I want.
UPDATE
Here is JSFiddle with all four cards: http://jsfiddle.net/Mwanitete/rzjxkv8e/2/
Here is HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="data">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
</div>
Here is JavaScript
$('.card-header').click(function(){
$('.card').toggleClass('.card-size')
})
Here is CSS
.data{
display: flex;
}
.card-size{
height: 224px;
}

Here's a JSFiddle with a working solution.
I've stripped out the collapse attributes and pulled it down to barebones.
http://jsfiddle.net/9musLxy4/88/
HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="data">
<div class='card-container' data-card-id='1'>
<div class='card-header' data-card-id='1'>
Header
</div>
<div class='card-body collapse' data-card-id='1'>
<div class='data'>
Body 1
</div>
</div>
</div>
<div class='card-container' data-card-id='2'>
<div class='card-header' data-card-id='2'>
Header
</div>
<div class='card-body collapse' data-card-id='2'>
<div class='data'>
Body 2
</div>
</div>
</div>
<div class='card-container' data-card-id='3'>
<div class='card-header' data-card-id='3'>
Header
</div>
<div class='card-body collapse' data-card-id='3'>
<div class='data'>
Body 3
</div>
</div>
</div>
<div class='card-container' data-card-id='4'>
<div class='card-header' data-card-id='4'>
Header
</div>
<div class='card-body collapse' data-card-id='4'>
<div class='data'>
Body 4
</div>
</div>
</div>
</div>
CSS:
.data{
display: flex;
}
.card-body {
border: 1px solid black;
}
JS:
$('.card-container').on('click', function(event) {
var id = $(this).data('card-id')
$('.card-body[data-card-id="' + id + '"]').toggle()
})

$('.card-header').click(function(){
$(this).toggleClass('.card-size');
$(this).parent().find('#test-block').toggleClass('show')
})
Use this

Are you just trying to change the size of the card in general when it is expanded? If so, lose the JQuery, you just need a CSS style:
#test-block .card-body {
height: 224px;
}
If you want to the card size to remain the same after you open it, then you would not want to toggle the size class, but simply add it.
$('.card-header').click(function(){
$(this).closest('.card').addClass('card-size');
})
http://jsfiddle.net/9musLxy4/74/

Hiding custom buttons with Slick Scroller Carousel

I need to be able to hide the previous button when on the first slide or the next button when on the last slide of the Slick Scoller Carousel.
However I cannot seem to find a way to do this with custom buttons.
Code currently:
<div class="myscroller">
<div class="item"
<p>SLIDE 1</p>
</div>
<div class="item"
<p>SLIDE 2</p>
</div>
<div class="item"
<p>SLIDE 3</p>
</div>
</div>
<button id="left" onClick="myPrev()" class="slick-arrow btn btn-primary">Previous</button>
<button id="right" onClick="myNext()" class="slick-arrow btn btn-primary" style="float: right">Next</button>
<script type="text/javascript">
$(document).ready(function(){
$('.myscroller').slick({
infinite: false,
arrows: false
});
});
function myPrev(){
$('.myscroller').slick('slickPrev');
}
function myNext(){
$('.myscroller').slick('slickNext');
}
</script>
I've tried using some css styling but to no avail. One post claimed to use this in the css, but it didnt work:
<style>
.slick-arrow[aria-disabled="true"]{
opacity: 0;
}
</style>
Any suggestions would be appriciated.

You can achieve this by using some js code ,
assign a click listner on button then check wether ist's in the first or last slide ( .first / last ().hasClass("slick-current");), to enable or disable buttton
See below snippet :
$(function() {
$('.myscroller').slick({
infinite: false,
arrows: false
});
$("#left").hide()
$(".slick-arrow").on("click", function() {
var isFirst = $(".slick-slide").first().hasClass("slick-current");
var isLast = $(".slick-slide").last().hasClass("slick-current");
isFirst ? $("#left").hide() : $("#left").show();
isLast ? $("#right").hide() : $("#right").show();
});
});
function myPrev() {
$('.myscroller').slick('slickPrev');
}
function myNext() {
$('.myscroller').slick('slickNext');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" />
<div class="myscroller">
<div class="item">
<p>SLIDE 1</p>
</div>
<div class="item">
<p>SLIDE 2</p>
</div>
<div class="item">
<p>SLIDE 3</p>
</div>
</div>
<button id="left" onClick="myPrev()" class="slick-arrow btn btn-primary">Previous</button>
<button id="right" onClick="myNext()" class="slick-arrow btn btn-primary" style="float: right">Next</button>

Try this
$(document).ready(function(){
$('.myscroller').slick({
infinite: false,
arrows: true,
prevArrow:'<button id="left" onClick="myPrev()" class="slick-arrow btn btn-primary">Previous</button>',
nextArrow:'<button id="right" onClick="myNext()" class="slick-arrow btn btn-primary" style="float: right">Next</button>',
});
});
.myscroller
{
position: relative;
padding-bottom: 50px;
}
.slick-arrow
{
position: absolute;
bottom: 0;
}
#left.slick-arrow
{
left: 0;
}
#right.slick-arrow
{
right: 0;
}
.slick-arrow.slick-disabled
{
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" />
<div class="myscroller">
<div class="item">
<p>SLIDE 1</p>
</div>
<div class="item">
<p>SLIDE 2</p>
</div>
<div class="item">
<p>SLIDE 3</p>
</div>
</div>

angularjs injected view not filling container?

I'm a beginner working on a project in the MEAN stack. I'm getting inconsistent HTML previews when I render it by itself and when I run it from the project.
What it's supposed to look like (when I preview it by itself):
imgur
and here's what it looks like when I build the project:
imgur
I'd like the partial view to sit under the header and fill the remaining space on the screen.
Here's my index.html
<!doctype html>
<html ng-app="angulobby">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="css/text" href="./stylesheets/style.css">
<script src="https://use.fontawesome.com/7222f42b52.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="./main.js"></script>
<script src="./services.js"></script>
<script src="./controllers.js"></script>
<base href="/">
</head>
<body data-ng-controller="IndexController">
<!-- HEADER AND NAVBAR -->
<div class="box">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AnguLobby Prototype</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> Login</li>
<li><i class="fa fa-comment"></i> Register</li>
<div ng-controller="logoutController">
<a ng-click='logout()' class="btn btn-default">Logout</a>
</div>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where the content will be injected -->
<div data-ng-view></div>
</div>
</div>
</body>
</html>
and here is the partial view home.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="../stylesheets/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="container" class="container-fluid" data-ng-controller="homeController">
<div class="row">
<div id="left" class="col-md-3">
1 of 3
</div>
<div id="middle" class="col-md-3">
2 of 3
</div>
<div id="right" class="col-md-3">
<div class="container-fluid" id="chat-container">
<div id="messages-box">
<h1 id="room-name"></h1>
<div data-ng-repeat="message in messages track by $index">
<span> {{message}} </span>
</div>
</div>
<div>
<form data-ng-submit="sendMessage()">
<input class="col-sm-11" id="m" data-ng-model="text" autocomplete="off"/>
<button class="btn btn-sm btn-info col-sm-1">SEND</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script></script>
</body>
</html>
and finally styles.css
html, body{
width: 100%;
height: 100%;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
#main {
background-color: aliceblue;
flex-grow: 1;
}
#ng-view {
height: 100%;
}
#container {
height: 100%;
width: 100%;
}
#left, #middle, #right {
height: 100%;
width: 33%;
}
#chat-container {
display: flex;
flex-direction: column;
background-color: lightblue;
height: 100%;
width: 100%;
}
#messages-box {
flex-grow: 1;
}

You have an HTML page in the div of another HTML page. The inner page is 100% height of the div (which is only as high as the content)
Just remove the html and body tags from the home.html partial. You may want to examine how you are including your js scripts as well...
<div id="container" class="container-fluid" data-ng-controller="homeController">
<div class="row">
<div id="left" class="col-md-3">
1 of 3
</div>
<div id="middle" class="col-md-3">
2 of 3
</div>
<div id="right" class="col-md-3">
<div class="container-fluid" id="chat-container">
<div id="messages-box">
<h1 id="room-name"></h1>
<div data-ng-repeat="message in messages track by $index">
<span> {{message}} </span>
</div>
</div>
<div>
<form data-ng-submit="sendMessage()">
<input class="col-sm-11" id="m" data-ng-model="text" autocomplete="off"/>
<button class="btn btn-sm btn-info col-sm-1">SEND</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>

Jquery + owl.carousel - Stop the slider when flying video from youtube

I use jquery owl caorusel (http://owlgraphic.com/owlcarousel )
Sliders are 2 and in these videos from Youtube. When I click on the play this slider has to stop. Can anyone help?
My app
// owl home
$(".slider-home .owl-carousel").owlCarousel({
rewindNav: true,
navigation: true,
pagination: false,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
mouseDrag: false,
autoPlay: true,
stopOnHover: true,
rewindSpeed: 5000,
video:true,
lazyLoad:false,
afterMove : function(){
$('video').each(function () {
this.pause();
$('.slider-video').next().show();
});
}
});
and html
<div class="slider-home">
<div class="owl-carousel owl-theme">
<div class="item" style="background-image: url('tmp/car1920x1080.jpg');">
<div class="item-inner">
<div class="container">
<div class="row">
<div class="col-sm-9">
<h1>header1</h1>
</div> <!-- .col -->
</div> <!-- .row -->
</div> <!-- .container -->
</div> <!-- .item-inner -->
</div> <!-- .item -->
<div class="item disable-owl-swipe">
<iframe class="youtube-player" width="560" height="315" src="http://www.youtube.com/embed/9UlBsQLjjWI?loop=1&playlist=9UlBsQLjjWI&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<div class="item-inner">
<div class="container">
<div class="row">
<div class="col-sm-9">
<h1>header2</h1>
</div> <!-- .col -->
</div> <!-- .row -->
</div> <!-- .container -->
</div> <!-- .item-inner -->
</div> <!-- .item -->
</div>

How to make 2 (frame?) using twitter bootstrap?

this is what I started to make in twitter bootstrap..
I am new using this.. Can you help me to make a 2 split page inside the html
that the menu in header when scrolled down will not disappear ..
I made html codes below Thanks!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Teacher</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">`
/* CSS used here will be applied after bootstrap.css */
body{
margin-top: 1px;
}
.divide-nav{
height: 80px;
background-color: #428bca;
}
.divide-text{
color:#fff;
line-height: 20px;
font-size:20px;
padding: 15px 0;
}
.affix {
top: 1px;
width:100%;
}
.filler{
min-height: 2000px;
}
.navbar-form {
padding-left: 0;
}
.navbar-collapse{
padding-left:0;
}
#footer {
height: 60px;
background-color: #f5f5f5;
}
</style>
<style type="text/css"></style>
</head>
<!-- HTML code from Bootply.com editor -->
<body>
<div class="divide-nav">
<div class="container">
<p class="divide-text"><img src ="musar-logo.png"></p>
</div>
</div>
<nav class="navbar navbar-default navbar-lower affix-top" role="navigation">
<div class="container">
<div class="collapse navbar-collapse collapse-buttons">
<form class="navbar-form navbar-left" role="search">
<button class="btn btn-success">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
</form>
</div>
</div>
</nav>
<frameset cols="25%,*,25%">
<frame src="1.html">
<frame src="it.html">
<frame src="it.html">
</frameset>
<div class="container">
<div class="row">
<div class="filler"></div>
</div>
</div>
<div class="modal-body row">
<div class="col-md-6">
<!-- Your first column here -->
</div>
<div class="col-md-6">
<!-- Your second column here -->
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- JavaScript jQuery code from Bootply.com editor -->
<script type="text/javascript">
$(document).ready(function() {
$('.navbar-lower').affix({
offset: {top: 50}
});
});
</script>
<div id="footer">
<div class="container">
<p class="text-muted credit">Footer Trial</a></p>
</div>
</div>
</body>
</html>

Expanding on the above answer, I put up a fiddle.
http://jsfiddle.net/w7s2o90e/1/
<title>Teacher</title>
<!-- HTML code from Bootply.com editor -->
<body>
<div class="divide-nav">
<div class="container">
<p class="divide-text"><img src ="musar-logo.png"></p>
</div>
</div>
<nav class="navbar navbar-default navbar-lower affix-top" role="navigation">
<div class="container">
<div class="collapse navbar-collapse collapse-buttons">
<form class="navbar-form navbar-left" role="search">
<button class="btn btn-success">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
</form>
</div>
</div>
</nav>
<frameset cols="25%,*,25%">
<frame src="1.html">
<frame src="it.html">
<frame src="it.html">
</frameset>
<div class="row-fluid">
<div id="left" class="col-sm-4">
<div id="allYourContent" class= "col-sm-12">
</div>
</div>
<div id="right" class="col-sm-8">
<!--Body content-->
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Footer Trial</a></p>
</div>
</div>
</body>
If you want a fixed size and the left side to scroll use
overflow:scroll
in your css.
The two columns from above work, but until you add content or a size to them, they won't show up (see fiddle). I used
class="col-sm-4" & class="col-sm-8"
instead of "span" but it should be similar.
I didn't edit all of your code, but it looks generally like what you were trying to achieve.

You can make a two grid layout to achieve this.
You can find more documentation on this at
http://getbootstrap.com/2.3.2/scaffolding.html
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Slick.js syncing multiple slider navs - javascript

Related

How to change CSS on click?

Hiding custom buttons with Slick Scroller Carousel

angularjs injected view not filling container?

Jquery + owl.carousel - Stop the slider when flying video from youtube

How to make 2 (frame?) using twitter bootstrap?

Categories

Resources