Design Slider

← zurück zum Design Framework

Verantwortlicher: Patrick Puritscher

Beschreibung: Das Element Slider kommt beim Tausch einer Barcard zum Einsatz.

Betroffende Dateien: index.html, elements.css

Eingebundene Bibliotheken: -

---

HTML

Zum besseren Verständnis sind die zugehörigen Klassen der Barcard enthalten.

<div class="e__slider grid">
	<div class="e__slider-background padding-default">
		<div class="col-7"></div>
		<span class="col-5 align-right e__slider-background-text">18:30 - 19:30</span>

		<span class="e__slider-background-footer align-center">Wählen Sie eine alternative Bar aus</span>
	</div>
	<ul class="e__slider-stage" style="width:200%;left:0%;">
		<li class="e__slider-stage-element" style="width:calc( 50% - 70px )">
			<div class="e__barcard clearfix">
				<div class="e__barcard-head grid">
					<div class="col-7">
						<h3>Hascienda</h3>
					</div>
				</div>
				<div class=" e__barcard-body clearfix">
					<p class="e__quote">„Seit 1991 der temperamentvolle Mexikaner in Stuttgart! Erleben Sie die richtige Mischung aus vielfältigen mexikanischen Gaumenfreuden und bester Unterhaltung“</p>
				</div>
				<div class="e__barcard-footer">
					<span class="col-5"><span class="i__euro-colored"></span><span class="i__euro-halfcolored"></span><span class="i__euro"></span><span class="i__euro"></span><span class="i__euro"></span></span>
					<span class="col-2"></span>
					<span class="col-5 align-right"><span class="i__star-colored"></span><span class="i__star-colored"></span><span class="i__star-colored"></span><span class="i__star-halfcolored"></span><span class="i__star"></span></span>
				</div>
			</div>
		</li>
		<li class="e__slider-stage-element" style="width:calc( 50% - 70px )">
			<div class="e__barcard clearfix">
				<div class="e__barcard-head grid">
					<div class="col-7">
						<h3>Mauritius</h3>
					</div>
				</div>
				<div class=" e__barcard-body clearfix">
					<p class="e__quote">„Seit 1991 der temperamentvolle Mexikaner in Stuttgart! Erleben Sie die richtige Mischung aus vielfältigen mexikanischen Gaumenfreuden und bester Unterhaltung“</p>
				</div>
				<div class="e__barcard-footer">
					<span class="col-5"><span class="i__euro-colored"></span><span class="i__euro-halfcolored"></span><span class="i__euro"></span><span class="i__euro"></span><span class="i__euro"></span></span>
					<span class="col-2"></span>
					<span class="col-5 align-right"><span class="i__star-colored"></span><span class="i__star-colored"></span><span class="i__star-colored"></span><span class="i__star-halfcolored"></span><span class="i__star"></span></span>
				</div>
			</div>
		</li>
	</ul>
</div>

CSS

elements.css

/** Slider **/

.e__slider {
    position: relative;
    height: 210px;
    background: #f2f2f2;
}

.e__slider-stage,
.e__slider-stage-element {
    margin: 0;
    padding: 0;
    list-style: none;
}

.e__slider-stage {
    /* Default Wert */
    width: 1000%;
    overflow: hidden;
    position: absolute;
    z-index: 5;
    padding-top: 30px;
    padding-right: 5px;
    padding-bottom: 30px;
    padding-left: 5px;
}

.e__slider-stage-element {
    margin: 0 5px 0 5px;
    float: left;
    box-shadow: 0px 5px 16px 2px #666;
    max-height: 155px;
    width: 85vw;
}

.e__slider-stage-element .e__barcard {
    padding-top: 10px;
}

.e__slider-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
}

.e__slider-background-text {
    font-weight: 500;
    font-size: 1rem;
}

.e__slider-background-footer {
    display: block;
    position: absolute;
    bottom: 10px;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    font-style: italic;
}

/** /Slider **/