program

In this example below you will see how to do a program with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by JunkiSuzuki, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JunkiSuzuki ©
  • HTML
  • CSS
  • JavaScript
    <div class="program">
	<div class="program_slider swiper-wrapper">
		<div class="program_toggle_btn">
			<div class="btn_title">過去の番組を見る</div>
		</div>
		<div class="program_guide_wrapper past swiper-slide">
			<div class="schedule_time">7:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクション</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper past swiper-slide">
			<div class="schedule_time">8:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクション</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper past swiper-slide">
			<div class="schedule_time">9:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクション</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper past swiper-slide">
			<div class="schedule_time">10:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクションaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper past swiper-slide">
			<div class="schedule_time">11:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクション</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper past swiper-slide">
			<div class="schedule_time">12:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクション</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper past  swiper-slide">
			<div class="schedule_time">13:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクションああああああああああああああああああああ</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper past swiper-slide">
			<div class="schedule_time">14:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクション</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper current swiper-slide">
			<div class="schedule_time">15:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクション</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper future swiper-slide">
			<div class="schedule_time">16:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクション</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper future swiper-slide">
			<div class="schedule_time">17:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクション</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper future swiper-slide">
			<div class="schedule_time">18:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクション</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper future swiper-slide">
			<div class="schedule_time">19:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクション</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper future swiper-slide">
			<div class="schedule_time">20:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクション</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
		<div class="program_guide_wrapper future swiper-slide">
			<div class="schedule_time">21:00</div>
			<div class="program_content">
				<div class="program_image_area">
					<div class="navigation_image">
						<img src="http://qvc.jp/bangumi/img/navi_4375.jpg">
					</div>
					<div class="on_air">ON AIR</div>
				</div>
				<div class="program_detail">
					<div class="program_category">カテゴリ・テスト</div>
					<div class="program_title prefix">ノーザンワールドリアルファーコレクション</div>
					<div class="navigator">テスト 太郎</div>
				</div>
				<div class="link_for_product">
					<a href="#" title="for_product">オンエアした商品へ</a>
				</div>
			</div>
		</div>
	</div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>


/*Downloaded from https://www.codeseek.co/JunkiSuzuki/program-OmGRar */
    .program {
  font-family: Meiryo;
  overflow: hidden;
  background-color: #FFFFFF;
}
.program_toggle_btn {
  margin: 0 auto;
  width: 98%;
  height: 40px;
}
.btn_title {
  text-align: center;
  background: gray;
  line-height: 40px;
  width: 100%;
  height: 100%;
}

.current .schedule_time {
  background-color: #ED5D5F;
  color: #FFFFFF;
}
.past .schedule_time {
  background-color: #57444F;
  color: #FFFFFF;
}
.future .schedule_time {
  background-color: #8E8E93;
  color: #000000;
}
.program_slider .program_guide_wrapper {
  border-style: solid;
  border-width: 1px;
  border-color: #f5f5f5;
}
.program_slider .program_guide_wrapper {
  border-style: solid;
  border-width: 1px;
  border-color: #f5f5f5;
}
.program_image_area .on_air {
  font-size: 12px;
  height: 19px;
  width: 48px;
  margin: 0 auto;
  background-color: #ED5D5F;
  color: #FFFFFF;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
.past .program_image_area .on_air {
  display: none;
}
.future .program_image_area .on_air {
  display: none;
}
.link_for_product a {
  text-decoration: none;
  display: block;
  width: 130px;
  height: 22px;
  background-color: #ED5D5F;
  color: #FFFFFF;
  font-family: Meiryo;
  font-size: 12px;
  display: -webkit-flex;
  display: flex -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.future .link_for_product {
  display: none;
}

.program_slider .program_guide_wrapper {
  border-style: solid;
  border-width: 1px;
  border-color: #f5f5f5;
}
.navigation_image {
  width: 50px;
  height: 60px;
  margin: 0 auto;
}
.program_image_area .navigation_image img {
  border-radius: 50%;
}

@media screen and (max-width: 320px) {
  .program {
    font-size: 12px;
    max-width: 94%;
    min-width: 260px;
    height: 470px;
    margin: auto;
  }
  .program_date {
    display: block;
    font-size: 16px;
    text-align: center;
    margin: auto;
    color: #57444F;
  }
  .program_guide_wrapper {
    height: 150px;
    width: 93%;
    margin: 0 auto;
    margin-bottom: 10px;
    position: relative;
    top: 30px;
  }
  .program_content {
    margin-left: 5px;
  }
  .schedule_time {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: Bold;
  }
  .program_image_area {
    float: left;
    width: 70px;
    height: 100px;
    margin-bottom: 5px;
  }
  .program_image_area .navigation_image {
    width: 50px;
    height: 50px;
    margin: 5px auto 10px;
  }
  .program_detail {
    width: 87%;
    margin: 8px 20px 5px 25px;
  }
  .link_for_product a {
    bottom: 2px;
  }
  .swiper-button-next {
    display: none;
  }
  .swiper-button-prev {
    display: none;
  }
}

@media screen and (min-width: 321px) and (max-width: 480px) {
  .program {
    font-size: 12px;
    max-width: 94%;
    min-width: 260px;
    height: 470px;
    margin: auto;
  }
  .program_date {
    display: block;
    font-size: 16px;
    text-align: center;
    margin: auto;
    color: #57444F;
  }
  .program_guide_wrapper {
    height: 150px;
    width: 93%;
    margin: 0 auto;
    margin-bottom: 0px;
    position: relative;
    top: 30px;
  }
  .program_content {
    margin-left: 5px;
  }
  .schedule_time {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: Bold;
  }
  .program_image_area {
    float: left;
    width: 70px;
    height: 100px;
    margin-bottom: 5px;
  }
  .program_image_area .navigation_image {
    width: 50px;
    height: 50px;
    margin: 5px auto 10px;
  }
  .program_detail {
    width: 87%;
    margin: 8px 20px 5px 25px;
  }  
  .link_for_product {
    width: 95%;
  }   
  .link_for_product a {
    margin-left: auto;
    bottom: 2px;
  }
  .swiper-button-next {
    display: none;
  }
  .swiper-button-prev {
    display: none;
  }
}

@media screen and (min-width: 481px) and (max-width: 640px) {
  .program {
    max-width: 95%;
    min-width: 481px;
    height: 648px;
  }
  .program_guide_wrapper {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    height: auto;
    min-height: 90px;
    width: 98%;
    margin: 0 auto;
    position: relative;
    top: 30px;
  }
  .program_detail {
    width: 85%;
    max-height: 90%;
    position: relative;
    font-size: 14px;
  }
  .program_content {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    width: 54.6875%; 
    margin: 5px auto auto 5px;
  }
  .schedule_time {
    text-align: center;
    width: 70px;
    font-size: 17px;
    font-weight: Bold;
    float: left;
  }
  .schedule_time p {
    font-size: 13px;
    font-weight: normal;
    text-align: center;
    margin-top: 13px;
    margin-bottom: 0px;
  }
  .program_image_area {
    width: 70px;
  }
  .program_image_area .navigation_image {
    width: 50px;
    height: 50px;
    margin: 0 auto 5px;
  }
  .link_for_product a {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 10px;
  }
  .swiper-button-next {
    display: none;
  }
  .swiper-button-prev {
    display: none;
  }
  .program_date {
    display: none;
  }
}

@media screen and (min-width: 641px) and (max-width: 800px) {
  .program {
    max-width: 95%;
    min-width: 481px;
    height: 648px;
  }
  .program_guide_wrapper {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    height: auto;
    min-height: 90px;
    width: 98%;
    margin: 0 auto;
    position: relative;
    top: 30px;
  }
  .program_detail {
    width: 85%;
    max-height: 90%;
    position: relative;
    font-size: 14px;
  }
  .program_content {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    width: 54.6875%; 
    margin: 5px auto auto 5px;
  }
  .schedule_time {
    text-align: center;
    width: 70px;
    font-size: 17px;
    font-weight: Bold;
    float: left;
  }
  .schedule_time p {
    font-size: 13px;
    font-weight: normal;
    text-align: center;
    margin-top: 13px;
    margin-bottom: 0px;
  }
  .program_image_area {
    width: 70px;
  }
  .program_image_area .navigation_image {
    width: 50px;
    height: 50px;
    margin: 0 auto 5px;
  }
  .link_for_product a {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 10px;
  }
  .swiper-button-next {
    display: none;
  }
  .swiper-button-prev {
    display: none;
  }
  .program_date {
    display: none;
  }
}

@media screen and (min-width: 801px) {
  .program_date {
    display: block;
    text-align: center;
    font-size: 20px;
    color: #57444F;
    margin: 0 auto 30px;
  }
  .program_guide_wrapper .program_image_area {
    display: none;
  }
  .program {
    width: 870px;
    margin: auto;
    overflow: hidden;
  }
  .program_guide_wrapper .schedule_time {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 40px;
    font-size: 18px;
  }
  .program_slider .program_guide_wrapper {
    height: 168px;
    width: 203px;
  }
  .swiper-slide-active .program_image_area .navigation_image {
    width: 50px;
    height: 60px;
    margin: 0 auto 15px;
  }
  .swiper-slide-active .program_image_area {
    float: left;
    display: block;
    width: 70px;
    height: 128px;
  }
  .program_detail {
    margin: 9px 10px 0 13px;
  }
  .program_detail div {
    color: #4A4A4A;
    font-size: 14px;
    text-align: left;
    line-height: 17px;
  }
  .program_slider .program_guide_wrapper {
    height: 168px;
    width: 203px;
  }
  .program_slider .swiper-slide-active {
    width: 252px;
  }
  .program_content {
    margin-top: 9px;
    margin-right: 12px;
  }
  .program_title {
    position: relative;
    margin-bottom: 7px;
  }
  .program_detail .navigator {
    margin-bottom: 5px;
  }
  .swiper-button-next {
    top: 148px;
    right: 30px;
    z-index: 999;
  }
  .swiper-button-prev {
    top: 148px;
    left: 30px;
    z-index: 999;
  }

  .program::before {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 998;
    content: '';
    width: 20%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .9) 20%, rgba(255, 255, 255, 1) 80%);
  }
  .program::after {
    position: absolute;
    top: 0;
    left: 0%;
    z-index: 998;
    content: '';
    width: 20%;
    height: 100%;
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .9) 20%, rgba(255, 255, 255, 1) 80%);
  }
}
@media screen and (min-width: 801px) and (max-width: 1100px) {
  .program::before {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 998;
    content: '';
    width: 16%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 20%, rgba(255, 255, 255, 1) 80%);
  }
  .program::after {
    position: absolute;
    top: 0;
    left: 0%;
    z-index: 998;
    content: '';
    width: 16%;
    height: 100%;
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 20%, rgba(255, 255, 255, 1) 80%);
  }



/*Downloaded from https://www.codeseek.co/JunkiSuzuki/program-OmGRar */
    $(function(){
$('.hidden_area').hide();
var toggled = false;
$('.btn_title').click(function(){
	$('.hidden_area').fadeToggle();
	mySwiper.update();
	if (toggled) {
		$(this).text('過去の番組を見る');
		toggled = false;
	} else {
		$(this).text('過去の番組を閉じる');
		toggled = true;
	}
});
         if (window.innerWidth > 801){
          var d =  'horizontal';
        } else {
          var d = 'vertical';    
        }
      
      var mySwiper = new Swiper('.program',{
  centeredSlides: true,
  slidesPerView: 'auto',
  prevButton: '.swiper-button-prev',
  nextButton: '.swiper-button-next',
  initialSlide: 7,
  direction: d,
});
  $(window).on('load resize', function(){
    if (window.innerWidth > 801){
      mySwiper.params.direction =  'horizontal';
    } else {
      mySwiper.params.direction = 'vertical';    
    }
    //swiper.update();
    var params = mySwiper.params;
    mySwiper.destroy(true, true);
    mySwiper = new Swiper('.program', params);
  });
});



Comments