Skip to main content
T
tim cross
Inspiring
April 27, 2019
Question

scroll Tab style tab bar?

  • April 27, 2019
  • 2 replies
  • 1181 views

Hi, Im not sure what type of plugin NOWTV use to create this (photo attached below)

At the top,it has a side scroll and when you click on the links it loads as a tab bar on each section.

I'm not sure if there is a plugin similar to this I could use or best way to create this?

(On desktop I'm planning to have 5 images - tablet 4 images and Mobile 2 images per line)

Any thought would be most helpful

Thanks

Tim

This topic has been closed for replies.

2 replies

O
osgood_
Legend
April 27, 2019

Tim,

The image doesnt disclose the functionality. Is there a link to this widget so we can see it in action?

T
tim crossAuthor
Inspiring
April 28, 2019

I am trying to find a widget that does this action. mov attached so you can see what I'm trying to find: http://www.tcdesignstamford.co.uk/test.mov

On a tablet or mobile when you sideswipe, it changes the tab bar and does not move the images as they are set to scroll down the page.

The code I am using, scrolls at the top but the tabs, you have to be clicked on to change the pages instead of sideswiping it. thats why im trying to find some different code to do this?

also because I have added a panel within the box which will hold an image and text inside the black panel I can't seem to get the panel to repeat so that it flows down the page as shown here. (for some reason it always goes down the page as one row)

any suggestions?

Thanks

Tim

T
tim crossAuthor
Inspiring
April 28, 2019

this is the code so far but does not really work well....

-----

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Untitled Document</title>

<!-- Bootstrap -->

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="width=device-width, minimal-ui">

<title>Untitled Document</title>

<link rel="stylesheet" href="css/bootstrap-4.3.1.css" />

</head>

<style>

.tabbable .nav-tabs {

    overflow-x: auto;

    overflow-y: hidden;

    flex-wrap: nowrap;

    width: 800px;

    margin-left: auto;

    margin-right: auto;

}.search-container {

    background-color: #FFE1E2;

    width: 800px;

    height: 1500px;

    margin-left: auto;

    margin-right: auto;

}

.search-container2 {

    padding-top: 21px;

    padding-left: 23px;

    padding-right: 43px;

}

.fav-delete-button {

    height: 50px;

    margin-left: 119px;

    margin-right: -9px;

    padding-left: 12px;

    margin-top: -13px;

}

.cp-black-panel {

    width: 118%;

    height: 28px;

    padding-top: 10px;

    padding-bottom: 55px;

    padding-left: 14px;

    margin-left: -22px;

    margin-top: 70px;

    margin-bottom: -37px;

    background-color: rgba(0,0,0,0.68);

}.other-shops-services {

    color: rgba(0,0,0,1.00);

    margin-left: 182px;

    margin-top: -371px;

    transform: rotate(90deg);

    width: 0px;

    height: 374px;

    font-size: 18px;

    background-color: rgba(253,0,4,1.00);

}

.search-grey-panel {

    width: 123%;

    height: 0px;

    padding-top: 10px;

    padding-bottom: 55px;

    padding-left: 14px;

    margin-left: -22px;

    margin-top: 58px;

    margin-bottom: -19px;

    background-color: rgba(0,0,0,0.68);

}

.testtest2 {

    width: 118%;

    height: 0px;

    padding-top: 0px;

    padding-bottom: 55px;

    padding-left: 14px;

    margin-left: -22px;

    margin-top: -231px;

    margin-bottom: -19px;

    background-color: rgba(36,153,251,1.00);

}

.login-button-index {

    color: rgba(0,0,0,1.00);

    font-style: italic;

    font-size: 21px;

    width: 70px;

    margin-right: -30px;

    margin-left: -1px;

}

.search-event-name {

    font-size: 16px;

    margin-top: 1px;

    width: 170px;

    color: rgba(255,255,0,1.00);

    text-align: left;

    padding-left: 6px;

    padding-top: 0px;

    line-height: 20px;

    padding-bottom: 3px;

    height: 0px;

}

.alert-panel-green {

    width: 118%;

    height: 0px;

    padding-top: 0px;

    padding-bottom: 55px;

    padding-left: 14px;

    margin-left: -22px;

    margin-top: -223px;

    margin-bottom: -19px;

    background-color: rgba(28,186,84,1.00);

}

.alert-panel-orange {

    width: 118%;

    height: 0px;

    padding-top: 0px;

    padding-bottom: 55px;

    padding-left: 14px;

    margin-left: -22px;

    margin-top: -223px;

    margin-bottom: -19px;

    background-color: #F88826;

}

.alert-panel-light-blue {

    width: 118%;

    height: 0px;

    padding-top: 0px;

    padding-bottom: 55px;

    padding-left: 14px;

    margin-left: -22px;

    margin-top: -223px;

    margin-bottom: -19px;

    background-color: #80C5FE;

}

.black-search-panel {

    width: 118%;

    height: 0px;

    padding-top: 0px;

    padding-bottom: 55px;

    padding-left: 14px;

    margin-left: -22px;

    margin-top: -207px;

    margin-bottom: -19px;

    background-color: rgba(36,153,251,1.00);

}

.cp-top-panel-text {

    color: #E6FF00;

    font-size: 23px;

    text-align: left;

    line-height: 27px;

    margin-top: -4px;

    font-weight: 500;

    margin-left: 9px;

    width: 167px;

    margin-bottom: 14px;

}

.white-text {

    color: #FFFFFF;

}

.yellow-text {

    color: #F2FF00;

}

.cp-link-button {

    color: #FFFFFF;

    font-size: 12px;

    margin-top: -17px;

    margin-left: -7px;

    width: 187px;

}

.line2 {

    font-size: 15px;

    margin-top: -26px;

    margin-left: 7px;

    width: 170px;

    color: rgba(255,255,255,1.00);

    text-align: left;

}

.heart-small {

    height: 50px;

    margin-left: 119px;

    margin-right: -9px;

    padding-left: 12px;

    margin-top: -13px;

}

li.item {

    position: relative;

    overflow: hidden;

    background-color: #F75B5E;

}

.item .bottom-panel {

    bottom: 0;

    position: absolute;

    width: 100%;

    left: 0;

    margin:0;

    height: auto;

}

.item .bottom-panel p {

    margin: 0;

    padding-top: 0px;

    padding-right: 10px;

    padding-left: 10px;

    padding-bottom: 6px;

}

.top-button {

    margin: 0;

    position: absolute;

    right: 14px;

    border-radius: 6px;

}

:root {

  --gutter: 20px;

}

.app {

    padding: var(--gutter) 0;

    display: grid;

    grid-gap: var(--gutter) 0;

    grid-template-columns: var(--gutter) 1fr var(--gutter);

    align-content: start;

}

.app > * {

  grid-column: 2 / -2;

}

.list-button {

    width: 53px;

    margin-left: 1104px;

    margin-top: -20px;

    font-size: 23px;

    margin-bottom: -37px;

    height: 36px;

    font-style: italic;

    visibility: hidden;

}

.app > .full {

    grid-column: 1 / -1;

    margin-bottom: -58px;

    margin-top: 4px;

}

.hs {

    display: grid;

    grid-gap: calc(var(--gutter) / 2);

    grid-template-columns: 10px;

    grid-template-rows: minmax(50px, 1fr);

    grid-auto-flow: column;

  grid-auto-columns: calc(20% - var(--gutter) * 2);

    overflow-x: scroll;

    scroll-snap-type: x proximity;

  padding-bottom: calc(.75 * var(--gutter));

  margin-bottom: calc(-.25 * var(--gutter));

    width: 1200px;

    margin-left: -20px;

}

.hs:before,

.hs:after {

  content: '';

  width: 10px;

}

ul {

    list-style: none;

    padding: 0;

}

h1,

h2,

h3 {

  margin: 0;

}

.app {

    height: 182px;

    /* [disabled]background-color: #DBD0BC; */

    overflow-y: scroll;

    margin-bottom: 57px;

    margin-left: auto;

    margin-right: auto;

    margin-top: 3px;

    clear: right;

    max-width: 1200px;

}

.red-text {

    color: #FF0004;

    font-weight: 600;

}

.hs > li,

.item {

    scroll-snap-align: center;

  padding: calc(var(--gutter) / 2 * 1.5);

    display: table;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background-color: #CBCBCB;

    border-radius: 8px;

    max-width: 1px;

    background-image: url(../images/demo-image.jpg);

    background-size: cover;

    background-repeat: no-repeat;

}

.item2 {

    scroll-snap-align: center;

  padding: calc(var(--gutter) / 2 * 1.5);

    display: table;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background-color: #CBCBCB;

    border-radius: 8px;

    max-width: 1px;

    background-size: cover;

    background-repeat: no-repeat;

    width: 259px;

    height: 145px;

    min-width: 174px;

}

.bottom-panel {

    background-color: #FF0004;

    width: 170px;

    height: 42px;

    margin-top: 74px;

}

.top-button {

    background-color: #FB3437;

    width: 29px;

    height: 24px;

    margin-left: 139px;

    margin-top: 4px;

}

.item {

    width: 220px;

    min-width: 174px;

    height: 106px;

    margin-left: 1px;

}

.grey-panel {

    background-color: #000000;

    width: 169px;

    height: 54px;

    margin-left: 0px;

    margin-top: 82px;

    padding-top: var(;

    padding-bottom: --gutter;

    padding-right: --gutter;

}

.side-search-strip {

}.bottom-search-panel {

    height: 93px;

    background-color: #FA2E32;

    border-bottom-left-radius: 10px;

    border-bottom-right-radius: 10px;

}

.add-event-2 {

}

.profile-advert1-text {

}

.profile1-text {

    margin-left: 64px;

    margin-top: 49px;

    margin-bottom: -46px;

}

.admin-welecome-text {

    margin-top: -13px;

    margin-left: -75px;

}

.red-colour-panel {

    background-color: #FF0004;

}

.yellow-colour-panel {

    background-color: #FFFF00;

}

.header-search-container {

    max-width: 800px;

}

.advertising-advert-text {

    margin-left: 198px;

    color: #F1FF00;

}

   

   

</style>

<body>

<!-- body code goes here -->

<div class="container-fluid">

<nav class="tabbable font">

<div class="nav nav-tabs" id="nav-tab" role="tablist">

<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>

<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>

<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>

<a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>

<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>

<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>

<a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>

<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>

<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>

<a class="nav-item nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>

<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>

</div>

</nav>

<div class="tab-content pt-2" id="nav-tabContent">

<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

<div class="search-container">

<div class="search-container2">

 

<li class="item"><img src="images/no-delete-button.svg" alt="" class="fav-delete-button" />

<div class="search-grey-panel">

<div class="module line-clamp"><p class="search-event-name font">title</p></div>

<p class="line2 text-white2"> </p></div>

</li>

</div>

</div>

</div>

<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile</div>

<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Contact</div>

</div>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery-3.3.1.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/popper.min.js"></script>

<script src="js/bootstrap-4.3.1.js"></script>

</body>

</html>

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
April 27, 2019

See Bootstrap Snippet Thumbnail Carousel using HTML CSS jQuery or Google the subject.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices