diff --git a/src/slider/index.html b/src/slider/index.html
index c3a68e2..11cfca5 100644
--- a/src/slider/index.html
+++ b/src/slider/index.html
@@ -90,6 +90,35 @@
 
 		<br>
 
+		<!-- Slider with Draggable Feature -->
+		<tp-slider flexible-height="yes" infinite="yes" draggable="yes">
+			<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow>
+			<tp-slider-arrow direction="next"><button>Next &raquo;</button></tp-slider-arrow>
+			<tp-slider-track>
+				<tp-slider-slides>
+					<tp-slider-slide><img src="https://picsum.photos/id/65/600/300" width="600" height="300" alt=""></tp-slider-slide>
+					<tp-slider-slide><img src="https://picsum.photos/id/76/600/300" width="600" height="300" alt=""></tp-slider-slide>
+					<tp-slider-slide><img src="https://picsum.photos/id/237/600/300" width="600" height="300" alt=""></tp-slider-slide>
+					<tp-slider-slide>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					</tp-slider-slide>
+				</tp-slider-slides>
+			</tp-slider-track>
+			<tp-slider-nav>
+				<tp-slider-nav-item><button>1</button></tp-slider-nav-item>
+				<tp-slider-nav-item><button>2</button></tp-slider-nav-item>
+				<tp-slider-nav-item><button>3</button></tp-slider-nav-item>
+				<tp-slider-nav-item><button>4</button></tp-slider-nav-item>
+			</tp-slider-nav>
+			<tp-slider-count current="1" total="4" format="$current / $total">1 / 4</tp-slider-count>
+		</tp-slider>
+
+		<br>
+
 		<!--Slider with 'fade in' effect and not flexible height-->
 		<tp-slider behaviour="fade" infinite="yes" swipe="yes">
 			<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow>
diff --git a/src/slider/style.css b/src/slider/style.css
new file mode 100644
index 0000000..983d3c3
--- /dev/null
+++ b/src/slider/style.css
@@ -0,0 +1,62 @@
+tp-slider {
+  display: block;
+}
+
+tp-slider-track {
+  display: block;
+  overflow-y: visible;
+  overflow-x: clip;
+  position: relative;
+}
+
+tp-slider-slides {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+}
+tp-slider:not([resizing=yes]) tp-slider-slides {
+  transition-duration: 0.6s;
+  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+}
+
+tp-slider-slide {
+  flex: 0 0 100%;
+  scroll-snap-align: start;
+}
+tp-slider[flexible-height=yes]:not([initialized]) tp-slider-slide:not(:first-child) {
+  display: none;
+}
+
+tp-slider-nav {
+  display: flex;
+  gap: 10px;
+}
+
+tp-slider[behaviour=fade] {
+  /**
+   * We are using first of type and direct child here
+   * so that if there is a nested slider it does not affect
+   * the styles for the inner slider and is only applied to the
+   * parent.
+   */
+}
+tp-slider[behaviour=fade] tp-slider-slides:first-of-type {
+  display: block;
+}
+tp-slider[behaviour=fade] tp-slider-slides:first-of-type > tp-slider-slide {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: auto;
+  transition-property: opacity, visibility;
+  transition-duration: 0.6s;
+  transition-timing-function: ease;
+  visibility: hidden;
+  opacity: 0;
+}
+tp-slider[behaviour=fade] tp-slider-slides:first-of-type > tp-slider-slide[active=yes] {
+  visibility: visible;
+  opacity: 1;
+  z-index: 1;
+}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/src/slider/style.css.map b/src/slider/style.css.map
new file mode 100644
index 0000000..1859db6
--- /dev/null
+++ b/src/slider/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACC,cAAA;ACCD;;ADEA;EACC,cAAA;EACA,mBAAA;EACA,gBAAA;EACA,kBAAA;ACCD;;ADEA;EACC,kBAAA;EACA,aAAA;EACA,uBAAA;ACCD;ADCC;EACC,yBAAA;EACA,0DAAA;ACCF;;ADGA;EACC,cAAA;EACA,wBAAA;ACAD;ADEC;EACC,aAAA;ACAF;;ADIA;EACC,aAAA;EACA,SAAA;ACDD;;ADKA;EAEC;;;;;IAAA;ACED;ADIC;EACC,cAAA;ACFF;ADIE;EACC,kBAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,wCAAA;EACA,yBAAA;EACA,gCAAA;EACA,kBAAA;EACA,UAAA;ACFH;ADKE;EACC,mBAAA;EACA,UAAA;EACA,UAAA;ACHH","file":"style.css"}
\ No newline at end of file
diff --git a/src/slider/tp-slider.ts b/src/slider/tp-slider.ts
index b1b476a..a1a454e 100644
--- a/src/slider/tp-slider.ts
+++ b/src/slider/tp-slider.ts
@@ -27,7 +27,11 @@ export class TPSliderElement extends HTMLElement {
 		'per-view',
 		'step',
 		'responsive',
+		'draggable',
 	];
+	protected isDragging: boolean = false;
+	protected dragStartX: number = 0;
+	protected dragOffsetX: number = 0;
 
 	/**
 	 * Constructor.
@@ -68,6 +72,9 @@ export class TPSliderElement extends HTMLElement {
 		// Touch listeners.
 		this.addEventListener( 'touchstart', this.handleTouchStart.bind( this ), { passive: true } );
 		this.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );
+
+		// Check for draggable initialization.
+		this.checkDraggable();
 	}
 
 	/**
@@ -91,7 +98,126 @@ export class TPSliderElement extends HTMLElement {
 	 */
 	static get observedAttributes(): string[] {
 		// Observed attributes.
-		return [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'per-view', 'step' ];
+		return [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'per-view', 'step', 'draggable' ];
+	}
+
+	/**
+	 * Check and initialize draggable behavior.
+	 */
+	checkDraggable() {
+		// Check if draggable attribute is set to "yes".
+		if ( 'yes' === this.getAttribute( 'draggable' ) ) {
+			this.initializeDraggableEvents();
+		}
+	}
+
+	/**
+	 * Initialize draggable event listeners.
+	 */
+	initializeDraggableEvents() {
+		// Add event listeners to handle dragging behavior (start, move, stop) for the slider.
+		this.addEventListener( 'mousedown', this.handleMouseDown.bind( this ) );
+		this.addEventListener( 'mousemove', this.handleMouseMove.bind( this ) );
+		this.addEventListener( 'mouseup', this.handleMouseUp.bind( this ) );
+		this.addEventListener( 'mouseleave', this.handleMouseUp.bind( this ) );
+
+		// Add cursor changes for grab on hover
+		this.addEventListener( 'mouseover', this.handleMouseOver.bind( this ) );
+		this.addEventListener( 'mouseout', this.handleMouseOut.bind( this ) );
+	}
+
+	/**
+	 * Mouse down event - Start dragging.
+	 *
+	 * @param {MouseEvent} event - The mouse event object.
+	 */
+	handleMouseDown( event: MouseEvent ) {
+		// Set dragging state to true
+		this.isDragging = true;
+
+		// Store the initial X position when the mouse is pressed
+		this.dragStartX = event.clientX;
+
+		// Prevent the default behavior (e.g., text selection)
+		event.preventDefault();
+
+		// Update styles for grabbing and disable text selection.
+		this.style.cursor = 'grabbing';
+		this.style.userSelect = 'none';
+	}
+
+	/**
+	 * Mouse move event - Drag the slider.
+	 *
+	 * @param {MouseEvent} event - The mouse event object.
+	 */
+	handleMouseMove( event: MouseEvent ) {
+		// Check if the dragging is active
+		if ( this.isDragging ) {
+			const deltaX: number = this.dragStartX - event.clientX;
+			this.dragOffsetX = deltaX;
+
+			// Find the slides container element and apply the transformation
+			const slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );
+
+			// Ensure slidesContainer exists before applying the transformation
+			if ( slidesContainer ) {
+				slidesContainer.style.transform = `translateX(${ this.dragOffsetX }px)`;
+			}
+		}
+	}
+
+	/**
+	 * Mouse up or mouse leave event - End dragging.
+	 */
+	handleMouseUp() {
+		// Check if the dragging is active
+		if ( this.isDragging ) {
+			this.isDragging = false;
+
+			// Find the slides container element and apply the transformation
+			const slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' );
+
+			// Ensure slidesContainer exists before applying the transformation
+			if ( slidesContainer ) {
+				slidesContainer.style.transform = `translateX(0)`;
+
+				// Determine the next or previous slide based on the drag offset
+				if ( 100 < this.dragOffsetX ) {
+					this.next();
+				} else if ( -100 > this.dragOffsetX ) {
+					this.previous();
+				}
+			}
+
+			// Reset draggable state
+			this.isDragging = false;
+			this.dragOffsetX = 0;
+
+			// Update styles for releasing and re-enable text selection.
+			this.style.cursor = 'grab';
+			this.style.userSelect = '';
+		}
+	}
+
+	/**
+	 * Handle mouse over - Set cursor to grab.
+	 */
+	handleMouseOver() {
+		// Only styles when the draggable will be yes.
+		if ( 'yes' === this.getAttribute( 'draggable' ) ) {
+			this.style.cursor = 'grab';
+		}
+	}
+
+	/**
+	 * Handle mouse out - Reset cursor.
+	 */
+	handleMouseOut() {
+		// Reset cursor if not dragging.
+		if ( ! this.isDragging ) {
+			this.style.cursor = '';
+		}
 	}
 
 	/**