Faculty Slider: Orange

Exported

Notes
HTML
SCSS
View

Faculty Slider Documentation

Implementation Notes

Media Requirements

Faculty Slider Image: The headshot image of the person in the profile card. Our standard headshot image size is 400px (width) by 500px (height), 72 ppi (pixels per inch) jpeg or png.
- Image should be no larger than 300kb (kilobytes)


        
        <section class="py-5 faculty-slider orange-a11y-bg">
    <div class="container glide">
        <div class="inner-sec-headings">
            <h2>Our Faculty</h2>
        </div>
        <div class="glide__track" data-glide-el="track">
            <div class="glide__slides">
                <div class="glide__slide">
                    <div class="glide__slide">
                        <div class="faculty-slider-img"> <img class="clip-mask-top-right" src="../../college-dls/college/images/faculty/Tracy-Cowden.jpg" alt="Bio Component loading=" lazy" /> </div>
                        <p class="faculty-slider-name"><a href="#">Jane Doe, Ph.D</a></p>
                        <p class="faculty-slider-title">Professor, Department</p>
                    </div>
                </div>
                <div class="glide__slide">
                    <div class="glide__slide">
                        <div class="faculty-slider-img"> <img class="clip-mask-top-right" src="../../college-dls/college/images/faculty/Nicole-Beebe.jpg" alt="Bio Component loading=" lazy" /> </div>
                        <p class="faculty-slider-name"><a href="#">Nicole Beebe, Ph.D., CISSP</a></p>
                        <p class="faculty-slider-title">Professor, Information Systems and Cyber Security, Department</p>
                    </div>
                </div>
                <div class="glide__slide">
                    <div class="glide__slide">
                        <div class="faculty-slider-img"> <img class="clip-mask-top-right" src="../../college-dls/college/images/faculty/Tracy-Cowden.jpg" alt="Bio Component loading=" lazy" /> </div>
                        <p class="faculty-slider-name"><a href="#">Jane Doe, Ph.D</a></p>
                        <p class="faculty-slider-title">Professor, Department</p>
                    </div>
                </div>
                <div class="glide__slide">
                    <div class="glide__slide">
                        <div class="faculty-slider-img"> <img class="clip-mask-top-right" src="../../college-dls/college/images/faculty/Nicole-Beebe.jpg" alt="Bio Component loading=" lazy" /> </div>
                        <p class="faculty-slider-name">No Link</p>
                        <p class="faculty-slider-title">Professor, Information Systems and Cyber Security, Department</p>
                    </div>
                </div>

            </div>
        </div>
        <!-- navigation buttons -->
        <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><span class="fa-solid fa-circle-arrow-left fa-2x"><span class="visually-hidden">Left Arrow</span></span></button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><span class="fa-solid fa-circle-arrow-right fa-2x"><span class="visually-hidden">Right Arrow</span></span></button>
        </div>
    </div>
    <input type="hidden" id="facultyCount" name="facultyCount" value="4" />
    <div class="row">
        <div class="col-12 text-center">
            <p><a href="#" class="blue-btn">View All Faculty &nbsp;<span class="fa-solid fa-arrow-right"></span></a></p>
        </div>
    </div>
</section>

File:

Content:


                                /* components/03-sections/05-content-group/07-faculty-slider/faculty-slider.scss */
/* BEGIN faculty-slider.scss */

.faculty-slider{
	.faculty-slider-name {
		padding: 17px 0px 0px 0px;
		border-top: 6px solid $orange;
		margin-bottom: 0.5rem;
		font-weight: bold;
		color: $orange-a11y;
		a {
			text-decoration: none;
			color: $orange-a11y;
			&:hover {
				color: $blue;
			}
		}
	}	
	&.blue-bg{
		.faculty-slider-name, .faculty-slider-title{
			color: $white;
		}
		a{
			color: $white;
		}
		.fa-circle-arrow-right,.fa-circle-arrow-left{
			&:hover{
				color: $grey;
			}
		}	
		h2{
			color: $white;
		}	
	}
	&.orange-a11y-bg{
		.faculty-slider-name {
			border-top: 6px solid $blue;
		}		
		.faculty-slider-name, .faculty-slider-title{
			color: $white;
		}
		a{
			color: $white;
			&:hover{
				background-color: $grey;
			}
		}	
		.fa-circle-arrow-right,.fa-circle-arrow-left{
			color: $white;
			&:hover{
				color: $blue;
			}			
		}
		.blue-btn{
			&:hover{
				background-color: $white;
				color: $blue;
			}
		}		
	}	
	&.grey-bg{
		.faculty-slider-name {
			border-top: 6px solid $blue;
			a{
				color: $blue;
			}
		}

		a:hover{
			background-color: $white;
		}

		.orange-btn{
			&:hover{
				background-color: $blue;
			}
		}
	}		
}

.glide__arrow{
	color: $orange-a11y;
	border: 0;
	box-shadow: none;
	text-shadow: unset;
	&:hover{
		color: $white;
	}
}

.glide__arrow--left{
	left: 1em;
}

.glide__arrow--right{
	right: 1em;
}

@include media-breakpoint-up(xl) {
	.glide__arrow--left{
		left: -3.75em;
 	}
	
	.glide__arrow--right{
		right: -3.75em;
	}

	.glide__arrow{
		&:hover{
			color: $blue;
		}
	}	

	.blue-bg{
		.glide__arrow{
			&:hover{
				color: $grey;
			}
		}			
	}

	.faculty-slider-img img{
		min-height: 350px;
	}
}

/* Dark Mode - Component Styles - Faculty Slider */
@include color-mode(dark) {
	.faculty-slider .inner-sec-headings h2 {
		color: $orange;
	}
	.faculty-slider {
		.faculty-slider-name {
			color: $orange;
			border-top: 6px solid $blue;
			a {color: $orange;
			}
		}
		.faculty-slider-title {
			color: $grey;
		}
	}
	.faculty-slider.blue-bg {
		.faculty-slider-name {
			border-top: 6px solid $orange;
			a {color: $white;
				&:hover {
					color: $blue;
				}
			}
		}
		.faculty-slider-title {
			color: $white;
		}
	}
	.faculty-slider.grey-bg .inner-sec-headings h2 {
		color: $blue;
	}
	.faculty-slider.grey-bg {
		.faculty-slider-name {
			color: $blue;
			border-top: 6px solid $orange-a11y;
			a {color: $orange-a11y;
			}
		}
		.faculty-slider-title {
			color: $blue;
		}
	}
	.faculty-slider.orange-a11y-bg .inner-sec-headings h2 {
		color: $blue;
	}
	.faculty-slider.orange-a11y-bg {
		.faculty-slider-name {
			border-top: 6px solid $blue;
			a {color: $white;
				&:hover {
					color: $blue;
				}
			}
		}
		.faculty-slider-title {
			color: $white;
		}
	}
}
/* Component Styles - Faculty Slider END */

/* END faculty-slider.scss */

URL: /components/raw/faculty-slider/faculty-slider.scss
Filesystem Path: components/03-sections/05-content-group/07-faculty-slider/faculty-slider.scss
Size: 2.9 KB


        <section class="py-5 faculty-slider orange-a11y-bg">
    <div class="container glide">
        <div class="inner-sec-headings">
            <h2>Our Faculty</h2>
        </div>        
        <div class="glide__track" data-glide-el="track">
            <div class="glide__slides">
                {{#each profiles as |faculty|}}
                <div class="glide__slide">
                    {{!-- {{render '@profile-card' faculty merge=true}} --}}
                    <div class="glide__slide">
                        <div class="faculty-slider-img"> <img class="clip-mask-top-right" src="{{path image}}" alt="Bio Component loading="lazy" /> </div>
                        {{#if @last}}
                            <p class="faculty-slider-name">No Link</p>
                        {{else}}
                            <p class="faculty-slider-name"><a href="#">{{ name }}</a></p>
                        {{/if}}
                        <p class="faculty-slider-title">{{ title }}, {{ department }}</p>
                    </div>
                </div>
                {{/each}}

            </div>
        </div>
        <!-- navigation buttons -->
        <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><span class="fa-solid fa-circle-arrow-left fa-2x"><span class="visually-hidden">Left Arrow</span></span></button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><span class="fa-solid fa-circle-arrow-right fa-2x"><span class="visually-hidden">Right Arrow</span></span></button>
        </div>
    </div>
    <input type="hidden" id="facultyCount" name="facultyCount" value="4" />
    <div class="row">
        <div class="col-12 text-center">
            <p><a href="#" class="blue-btn">View All Faculty &nbsp;<span class="fa-solid fa-arrow-right"></span></a></p>
        </div>
    </div>
</section>